这篇文章将向大家分享createMaterialTopTabNavigator的一些开发指南和实用技巧。
createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):
RouteConfigs
(必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么。TabNavigatorConfig
(可选):配置导航器的路由(如:默认首屏,navigationOptions,paths等)样式(如,转场模式mode、头部模式等)。从createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator
支持通过RouteConfigs
和 TabNavigatorConfig
两个参数来创建createMaterialTopTabNavigator导航器。
RouteConfigs支持三个参数screen
、path
以及navigationOptions
;
screen
(必选):指定一个 React 组件作为屏幕的主要显示内容,当这个组件被TabNavigator加载时,它会被分配一个navigation
prop。path
(可选):用来设置支持schema跳转时使用,具体使用会在下文的有关Schema
章节中讲到;navigationOptions
(可选):用以配置全局的屏幕导航选项如:title、headerRight、headerLeft等;eg:
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'blue',
},
}
createMaterialTopTabNavigator支持的屏幕导航选项的参数有:
export const MaterialTopTabNavigator = createMaterialTopTabNavigator({//在这里配置页面的路由
Page1: {
screen: Page1,
navigationOptions: {
tabBarLabel: 'Page10',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={'ios-home'}
size={26}
style=
/>
),
}
},
Page4: {
screen: Page4,
navigationOptions: {
tabBarLabel: 'Page2',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={'ios-people'}
size={26}
style=
/>
),
}
},
Page3: {
screen: Page3,
navigationOptions: {
tabBarLabel: 'Page3',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={'ios-chatboxes'}
size={26}
style=
/>
),
}
},
},
{
tabBarOptions: {
tabStyle: {
minWidth: 50
},
upperCaseLabel: false,//是否使标签大写,默认为true
scrollEnabled: true,//是否支持 选项卡滚动,默认false
// activeTintColor: 'white',//label和icon的前景色 活跃状态下(选中)
// inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下(未选中)
style: {
backgroundColor: '#678',//TabBar 的背景颜色
},
indicatorStyle: {
height: 2,
backgroundColor: 'white',
},//标签指示器的样式
labelStyle: {
fontSize: 13,
marginTop: 6,
marginBottom: 6,
},//文字的样式
},
}
)
TabNavigator的navigationOptions有两个关键的属性,tabBarLabel标签与tabBarIcon图标:
Page2: {
screen: Page2,
navigationOptions: {
tabBarLabel: 'Page2',
tabBarIcon: ({tintColor, focused}) => (
<Ionicons
name={focused ? 'ios-people' : 'ios-people-outline'}
size={26}
style=
/>
),
}
},
在上述代码中使用了react-native-vector-icons
的矢量图标作为Tab的显示图标,tabBarIcon接收一个React 组件,大家可以根据需要进行定制:
const {navigation} = this.props;
...
<Button
title="跳转到页面4"
onPress={() => {
navigation.navigate("Page4",{ name: 'Devio' })
}}
/>
代码解析:
页面跳转可分为两步:
const {navigation} = this.props;
navigate(routeName, params, action)
进行页面跳转: navigation.navigate('Page2'); navigation.navigate('Page3',{ name: 'Devio' });
这里在跳转到Page3
的时候传递了参数{ name: 'Devio' }
;
在使用react-navigation时往往有些需求通过简单的配置是无法完成的,比如:
类似上述的应用场景有很多,大家可以通过与本教程配套的最新版React Native+Redux打造高质量上线App视频教程进行进一步学习react-navigation的更多高级应用。