API
createMaterialTopTabNavigator(
RouteConfigs,TabNavigatorConfig)
参数说明
RouteConfigs
navigationOptions配置项参数说明
- title：tabBarLabel中的文字
- swipeEnabled：
Boolean是否可以滑动切换tab页面，如果不设置则使用TabNavigatorConfig中的swipeEnabled选项一般在TabNavigatorConfig中设置 - tabBarOnPress：
Object点击tab的回调方法该方法接收两个参数
（1）navigation（this.props.navigation中的值）
（2）defaultHandler（tab press 的默认 handler）
TabNavigatorConfig
- initialRouteName：tab页面打开的时候显示的tab页面
- order：由RouteConfigs的key组成的数组，按照该数组的顺序显示对应的tab页面
- backBehavior：在tab页面按手机返回键的动作。值为
initialRoute的时候返回到initialRouteName页面；值为none时返回上一页面或退出程序。默认为initialRoute - tabBarPosition：tab bar的位置
top或bottom；默认top - swipeEnabled：
Boolean左右滑动屏幕的时候是否切换tab，默认true - animationEnabled：切换tab页面的时候是否显示动画
- lazy：
Boolean打开tab页面的时候是否开启懒加载，默认false，渲染全部的tab页面；当为true的时候只有进入tab页面是才渲染对应的tab页面 - optimizationsEnabled：是否将tab页面用
<ResourceSavingScene />包裹。如果为true在tab页面失去焦点的时候会移除当前页面提高内存使用率 - initialLayout：
object包含width和height可以防止tab view渲染的延迟 - tabBarComponent：值为一个组件，用来覆盖tab bar
- tabBarOptions：
object
例：tabBarOptions:{ activeTintColor:"",//控制活跃状态下tab文字和icon的颜色 inactiveTintColor:"",//控制非活跃状态下tab文字和icon的颜色 showIcon:Boolean,//是否显示icon，默认false showLabel:Boolean,//是否显示tab上的文字，默认true upperCaseLabel:Boolean,//如果tab上的文字是英文是否大写，默认true pressColor:"",//被按下的tab的背景色 Android>5.0 pressOpacity:float,//被按下tab的透明度 iOS，Android<5.0 scrollEnabled:Boolean,//tab是否能够滑动，值为true时，当tab超出屏幕宽度的时候tab能够滚动。 tabStyle:{//定义tab bar中tab的样式(下图中蓝色框区域) backgroundColor:"", height:30 }, indicatorStyle:{//指示器的样式(下图中的红条) }, labelStyle:{//控制tab label的样式(下图中tab文字的黑色背景区域) }, iconStyle:{//定义icon的样式 }, style:{//定义tab bar的样式（下图中整个黄色背景） } }
示例
App.js
import React from 'react'
import {createStackNavigator, createMaterialTopTabNavigator, createAppContainer} from 'react-navigation'
import Detail from './components/Detail'
import Logistics from './components/message/Logistics'
import Messages from './components/message/Messages'
import Discount from './components/message/Discount'
import Subscribe from './components/message/Subscribe'
const TopNavigator = createMaterialTopTabNavigator({
Logistics:{
screen:Logistics,
navigationOptions:{
title:"物流"
}
},
Messages:{
screen:Messages,
navigationOptions:{
title:"通知"
}
},
Discount:{
screen:Discount,
navigationOptions:{
title:"优惠"
}
},
Subscribe:{
screen:Subscribe,
navigationOptions:{
title:"订阅"
}
}
},{
animationEnabled:false,
initialRouteName:"Subscribe",
backBehavior:"none",
order:["Discount","Logistics","Subscribe","Messages"],
tabBarOptions:{
activeTintColor:"red",
inactiveTintColor:"yellow",
pressColor:"red",
scrollEnabled:false,
tabStyle:{
borderColor:"blue",
borderWidth:2,
height:30
},
indicatorStyle:{
backgroundColor: "red",
height:5
},
labelStyle:{
backgroundColor:"black"
},
style:{
backgroundColor:"yellow"
}
}
})
const StackNavigator = createStackNavigator({
Detail:{
screen: Detail,
navigationOptions: {
title: "详情页"
}
},
Message:{
screen:TopNavigator,
navigationOptions:{
title:"消息"
}
}
},{
initialRouteName:"Detail",
headerLayoutPreset:"center"
})
export default createAppContainer(StackNavigator)
Detail.js
import React from 'react'
import {View, Text, Button} from 'react-native'
export default class Detail extends React.Component{
render(){
return (
<View>
<Text>Detail</Text>
<Button title={'打开消息页面'} onPress={()=>{
this.props.navigation.navigate("Message")
}}/>
</View>
)
}
}
4个tab页面 Logistics.js、Messages.js、Discount.js、Subscribe.js
import React from 'react'
import {View, Text, Button} from 'react-native'
export default class Logistics extends React.Component{
render(){
return (
<View>
<Text>物流</Text>
</View>
)
}
}
效果图