本文主要是介绍React Navigation 自认比较好的navigator组件(二)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
上篇介绍了最基本的StackNavigator，这篇介绍TabNavigator,两大神器组合，嘿嘿嘿。。。
http://www.jianshu.com/p/8392b0f0352d
TabNavigator
iOS中的TabBarController，感觉比另一个第三方好，因为不会同时持有所有界面，你的视图层级不会特别特别长。
用TabRouter建立起一个拥有几个tab的界面,
class MyHomeScreen extends React.Component {//设置标签(tab)样式static navigationOptions = {tabBar: {label: 'Home',// Note: By default the icon is only shown on iOS. Search the showIcon option below.icon: ({ tintColor }) => (<Imagesource={require('./chats-icon.png')}style={[styles.icon, {tintColor: tintColor}]}/>),},}render() {return (//加button，加回调事件，跳转界面<ButtononPress={() => this.props.navigation.navigate('Notifications')}title="Go to notifications"/>);}
}class MyNotificationsScreen extends React.Component {//设置这个界面的标签(tab)样式static navigationOptions = {tabBar: {label: 'Notifications',icon: ({ tintColor }) => (<Imagesource={require('./notif-icon.png')}style={[styles.tabIcon, {tintColor: tintColor}]}/>),},}render() {return (//加button，加回调事件返回上个界面<ButtononPress={() => this.props.navigation.goBack()}title="Go back home"/>);}
}//样式s
const styles = StyleSheet.create({icon: {width: 26,height: 26,},
});//创建TabNavigator
const MyApp = TabNavigator({//Home界面Home: {screen: MyHomeScreen,},//通知界面Notifications: {screen: MyNotificationsScreen,},
},
//一些选项，下面说
{tabBarOptions: {activeTintColor: '#e91e63',},
});完了之后，点 点 点
API Definition
TabNavigator(RouteConfigs, TabNavigatorConfig)
又是老三样,first:
RouteConfigs
和上个StackNavigator一样，该参数主要是设置一些路由
TabNavigatorConfig
不全 挑了一些用处多的
·swipeEnabled-轻扫 是否可以切换标签
·animationEnabled- 切换tab时是否带动画
·lazyLoad- 是否延迟加载tabs，未测试，猜想是否把所有标签的界面加载，我感觉lazy一下挺好的。
几个选项传递给下面的router，用来修改导航逻辑
·initialRouteName- 第一个被加载的router名称。
·order- routerName的数组，顺序决定着tab的顺序。
·paths- routerName的一个路径映射,还是要重载上面的paths属性
·backBehavior- 返回按钮使得tab切换回初始路由？if yes，设置成初始路由，或者是none，默认是initialRoute.
tabBarOptions for TabBarBottom(default tab bar on iOS)
·activeTintColor- label和icon的前景色 活跃状态下（选中）
·activeBackgroundColor- label和icon的背景色 活跃状态下
·inactiveTintColor- label和icon的前景色 不活跃状态下(未选中)
·activeBackgroundColor- label和icon的背景色 不活跃状态下
·showLabel- 是否显示label，默认为true
·style- tab bar的style
·labelStyle- tabbar上label的style
Example：
tabBarOptions: {activeTintColor: '#e91e63',labelStyle: { fontSize: 12 },style: {backgroundColor: 'blue',}
}Android部分的来了
Screen Navigation Options
还是配置一个静态 navigationOptions为你的组件 :
class ProfileScreen extends React.Component {static navigationOptions = {title: ({ state }) => `${state.params.name}'s Profile!`,tabBar: ({ state, setParams }) => ({icon: (<Image src={require('./my-icon.png')} />),}),};... All navigationOptions for the TabNavigator：
·title- 标题
·tabBar- 标签栏的标签
1)visible-是否可见
2)icon- react节点或者一个返回react节点的函数{focused
:boolean ,tintColor:string}，用来显示在tabBar上
3)label标题，要是没定义的花，界面（scence）的title会被使用。
Navigator Props
TabNavigator创建出来navigator后，可以携带的参数：
·screenProps-传递额外的选项给子组件:
const TabNav = TabNavigator({// config
});<TabNavscreenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>这篇关于React Navigation 自认比较好的navigator组件(二)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
