上篇文章介绍了StackNavigator的简单使用，就是路由的进出栈，传参等操作，这次简单介绍一下TabNavigator的使用，类似于react-native-scrollable-tab-view的滑动选项卡的开源组件。
效果图如下所示：
tabnavigation.gif
1.安装组件
npm i --save react-navigation
2.引入组件
import { TabNavigator } from 'react-navigation';
3.定义tab选项卡组件
const TabContainer = TabNavigator(
{
Main: { screen: MainContainer }, // 首页
Category: { screen: CategoryContainer }, // 标签
Feedback: { screen: Feedback }, // 反馈
About: { screen: About } // 关于
},
{
lazy: true,
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#3e9ce9',
inactiveTintColor: '#999999',
showIcon: true,
style: {
backgroundColor: '#fff'
},
indicatorStyle: {
opacity: 0
},
tabStyle: {
padding: 0
}
}
}
);
和导航StackNavigator一样，声明组件的结构为：
const TabContainer = TabNavigator(
{
// 所要展示的组件
},
{
// 配置项
}
)
4.属性详解
1.TabNavigator整体属性配置
| 属性 | 描述 |
|---|---|
| tabBarPosition | 标签栏的位置可以是“顶部”或“底部” : 'top' or 'bottom' |
| swipeEnabled | 是否允许在标签之间进行滑动 |
| animationEnabled | 是否在更改标签时动画 |
| lazy | 标签是否懒加载 |
| tabBarOptions | 配置标签栏，见下文 |
| initialRouteName | 第一次加载时初始标签路由的routeName |
| order | 定义选项卡顺序的routeNames数组 |
| backBehavior | 后退按钮是否会使Tab键切换到初始选项卡？如果是，设置为initialRoute，否则为none。默认为initialRoute |
2.tabBarOptions配置 （==IOS==）
| 属性 | 描述 |
|---|---|
| activeTintColor | 活动标签的标签和图标颜色 |
| activeBackgroundColor | 活动标签的背景颜色 |
| inactiveTintColor | 非活动标签的标签和图标颜色 |
| inactiveBackgroundColor | 非活动标签的背景颜色 |
| showLabel | 是否显示标签，默认为true |
| style | 标签栏的样式对象 |
| labelStyle | 标签标签的样式对象 |
| tabStyle | 标签的样式对象 |
示例代码：
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
3.tabBarOptions配置 （==Android==）
| 属性 | 描述 |
|---|---|
| activeTintColor | 活动标签的标签和图标颜色 |
| inactiveTintColor | 非活动标签的标签和图标颜色 |
| showIcon | 是否显示标签的图标，默认为false |
| showLabel | 是否显示标签，默认为true |
| upperCaseLabel | 是否使标签大写，默认为true |
| pressColor | 按压标签的颜色纹理（Android> = 5.0 only） |
| pressOpacity | 按压标签的不透明度（iOS和Android <5.0 only） |
| scrollEnabled | 是否启用可滚动选项卡 |
| style | 标签栏的样式对象 |
| labelStyle | 标签标签的样式对象 |
| iconStyle | 图标样式 |
| tabStyle | 标签的样式对象 |
| indicatorStyle | 标签指示器的样式对象（选项卡底部的行），就是每个选项卡下面的闲，默认是黄色的 |
4.屏幕导航选项(Screen Navigation Options)
==就是在具体选项卡组件中需要配置的属性==
比如上面gif图中，反馈组件的内部写法：
static navigationOptions = ({ navigation }) => ({
title: '建议',
tabBarIcon: ({ tintColor }) => (
<Icon name="md-thumbs-up" size={25} color={tintColor} />
),
headerRight:(
<Icon.Button
name="md-checkmark"
backgroundColor="transparent"
underlayColor="transparent"
activeOpacity={0.8}
onPress={()=>navigation.state.params.handleback()}
/>
)
});
| 属性 | 描述 |
|---|---|
| title | headerTitle和tabBarLabel的通用标题，即顶部和底部选项卡通用的 |
| tabBarVisible | True或false显示或隐藏选项卡栏，如果未设置，则默认为true |
| tabBarIcon | 图标组件元素 |
| tabBarLabel | 显示在标签的标题，可以自定义组件或者直接用上面的title |
