简介
react-navigation分为三个部分。
StackNavigator类似顶部导航条，用来跳转页面和传递参数。
TabNavigator类似底部标签栏，用来区分模块。
DrawerNavigator抽屉导航，类似从App左侧滑出一个页面。
这篇主要介绍底部标签栏(TabNavigator)的简单使用。好了，废话不多说，直接切入正题吧。
属性配置
以下介绍的只是本例程会涉及到的一些属性，关于更详细的介绍，请参阅这篇文章。
-
screen：对应界面名称，可以在其他页面通过这个screen传值和跳转。 -
tabBarIcon：设置标签栏的图标。 -
tabBarLabel：设置标签栏的标题(title)。 -
tabBarOptions：配置标签栏的一些属性。 -
activeTintColor：label和icon的前景色 活跃状态下（选中） 。 -
inactiveTintColor：label和icon的前景色 不活跃状态下(未选中)。 -
showIcon：是否显示图标，默认关闭。最好设置一下。 -
showLabel：是否显示label，默认开启。最好设置一下。 -
upperCaseLabel：是否使标签大写，默认为true。 -
pressColor：material涟漪效果的颜色。 -
pressOpacity：按压标签的透明度变化。 -
style：标签栏(tabbar)的样式。 -
labelStyle：标签(label)的样式。 -
indicatorStyle：android 中标签栏(TabBar)下面会显示一条线，高度设为 0 后就不显示线了。 -
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：top，bottom）。 -
swipeEnabled：是否允许在标签之间进行滑动。 -
animationEnabled：是否在更改标签时显示动画。 -
lazy：是否在app打开的时候将底部标签栏全部加载，默认false,推荐改成true哦。 -
initialRouteName： 设置默认的页面组件。 -
backBehavior：按back键是否跳转到第一个Tab(首页)，none为不跳转。
小技巧
小技巧引自此处
1、去掉安卓下的下划线，设置：tabBarOptions => indicatorStyle:{ height: 0 }；
2、底部导航在导航最上方添加一条分割线，设置：tabBarOptions => style => borderTopWidth: 0.5, borderTopColor: '#ccc'；
3、导航安卓图标和文字间隙比较大，手动调整小设置：tabBarOptions => labelStyle => margin: 0；
程序代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import { TabNavigator } from "react-navigation";
class Find extends Component {
static navigationOptions = {
tabBarLabel: '发现',
tabBarIcon: ({ focused }) =>
{
if (focused) {
return (
<Image style={styles.tabBarIcon} source={require('./images/find1.png')}/>
);
}
return (
<Image style={styles.tabBarIcon} source={require('./images/find2.png')}/>
);
},
};
render() {
return (
<View style={styles.container}>
<Text>发现界面</Text>
</View>
);
}
}
class Me extends Component {
static navigationOptions = {
tabBarLabel: '我的',
tabBarIcon: ({ focused }) =>
{
if (focused) {
return (
<Image style={styles.tabBarIcon} source={require('./images/me1.png')}/>
);
}
return (
<Image style={styles.tabBarIcon} source={require('./images/me2.png')}/>
);
},
};
render() {
return (
<View style={styles.container}>
<Text>我的界面</Text>
</View>
);
}
}
class Tong extends Component {
static navigationOptions = {
tabBarLabel: '通讯录',
tabBarIcon: ({ focused }) =>
{
if (focused) {
return (
<Image style={styles.tabBarIcon} source={require('./images/con1.png')}/>
);
}
return (
<Image style={styles.tabBarIcon} source={require('./images/con2.png')}/>
);
},
};
render() {
return (
<View style={styles.container}>
<Text>通讯录界面</Text>
</View>
);
}
}
class Chat extends Component {
static navigationOptions = {
tabBarLabel: '聊天',
tabBarIcon: ({ focused }) =>
{
if (focused) {
return (
<Image style={styles.tabBarIcon} source={require('./images/wei1.png')}/>
);
}
return (
<Image style={styles.tabBarIcon} source={require('./images/wei2.png')}/>
);
},
};
render() {
return (
<View style={styles.container}>
<Text>聊天界面</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
tabBarIcon: {
width: 24,
height: 24,
}
});
export const MyApp = TabNavigator(
{
Chat: {
screen: Chat,
},
Tong: {
screen: Tong,
},
Find: {
screen: Find,
},
Me: {
screen: Me,
},
},
{
tabBarOptions: {
activeTintColor: '#4BC1D2',
inactiveTintColor: '#000',
showIcon: true,
showLabel: true,
upperCaseLabel: false,
pressColor: '#788493',
pressOpacity: 0.8,
style: {
backgroundColor: '#fff',
paddingBottom: 0,
borderTopWidth: 0.5,
borderTopColor: '#ccc',
},
labelStyle: {
fontSize: 12,
margin: 1
},
indicatorStyle: {height: 0},
},
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: false,
lazy: true,
backBehavior: 'none',
});
AppRegistry.registerComponent('work', () => MyApp);
效果图
正常界面
正常界面
点击时样式
点击时样式
左右滑动切换界面
左右滑动切换界面
