React Navigation导航器之createBottomTabNavigator实现APP首页底部导航的效果

API

• createBottomTabNavigator(RouteConfigs,BottomTabNavigatorConfig)

参数说明

RouteConfigs

navigationOptions

1. title：底部tab上的文字，如：“首页”，“我的”
2. tabBarVisibletabBarVisible：Boolean是否显示tabBar，如果是false将隐藏底部tabBar，默认true
3. tabBarIcon：设置title上面的icon。
   值为组件或方法，当它的值是方法的时候此方法接收{ focused, horizontal, tintColor}作为参数(此方法的返回值应该是一个组件)
   horizontal：手机屏幕横着的时候horizontal为true，否则为false，当设备方向发生改变时icon重新渲染。
   focused：当前tab选中的时候focused为true否则为false
   tintColor：当前tab选中的时候值为tabBarOptions中的activeTintColor，否则为tabBarOptions中的inactiveTintColor
4. tabBarLabel：它的值可以是字符串、组件、方法;如果是方法那么此方法接收{ focused: boolean, tintColor: string }。未设置此属性时，title发挥作用
5. tabBarButtonComponent：值为组件
6. tabBarTestID：tab button的ID
7. tabBarOnPress：Function 参数为包含navigation和defaultHandler的对象。

BottomTabNavigatorConfig

1. initialRouteName ：打开tabBar页面的时候显示的第一个页面的路由名称，它的值为RouteConfigs的一个key
2. order：由RouteConfigs的key组成的一个数组，按照数组的顺序显示tabs
3. backBehavior：按下返回键时的行为，initialRoute返回initialRouteName对应的页面。none返回上一页面。默认initialRoute
4. lazy：Boolean默认true。如果为false的时候会把所有的tabs对应的页面渲染。true的时候只会打开页面的时候进行渲染
5. tabBarComponent：
6. tabBarOptions：object

tabBarOptions:{
   
   
    	activeTintColor:"",//活跃状态的label和icon颜色
	    activeBackgroundColor:"",活跃状态的tab背景色
    	inactiveTintColor:"",//非活跃状态的label和icon颜色
    	inactiveBackgroundColor:"",//非活跃状态的tab背景色
    	showLabel:true,//是否显示tab上的文字，默认true
    	showIcon:true,//是否显示tab上的icon，默认true
    	style:{
   
   //tabBar的样式
    	},
    	labelStyle:{
   
   //tabBar上label的样式
    	},
    	tabStyle:{
   
   //tabBar上tab的样式
    	}，
    	allowFontScaling:true,//