很容易的实现多个屏幕通过选项卡来切换。如下简单的案例：
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
},
});
API定义
TabNavigator(RouteConfigs, TabNavigatorConfig)
TabNavigatorConfig
tabBarComponent : 使用作为标签栏的组件，例如TabBarBottom(这是iOS的默认值)，TabBarTop(这是Android的默认值)
tabBarPosition : 标签栏位置，可以是top或者bottom。
swipeEnabled: 是否允许在选项卡之间滑动。
animationEnabled: 更改选项卡的时候是否有动画。
lazy:选项卡显示时，是否延迟，而不是直接显示。
initialRouteName: 第一次加载时初始标签路径的routeName
order: 排序，定义一个数组来排序路由。
paths: 提供一个路由映射。它将覆盖routeConfigs中设置的路径。
backBehavior: 按后退按钮是否切换到初始选项卡。
tabBarOptions :设置切换栏样式，具体如下：
IOS参数：
activeTintColor： 设置活动标签的图标和颜色。
activeBackgroundColor: 设置活动标签的背景色。
inactiveTintColor: 设置非活动标签的图标和颜色。
inactiveBackgroundColor : 设置非活动标签的背景色。
showLabel: 是否显示label，默认为显示。
style: tabbar总的样式。
labelStyle： label的样式
tabStyle: 切换卡项的样式。
Android参数：
activeTintColor:
inactiveTintColor:
showIcon:
showLabel:
upperCaseLabel:
pressColor:
pressOpacity:
scrollEnabled:
tabStyle:
indicatorStyle:
labelStyle:
iconStyle:
style:
static navigationOptions
static navigationOptions = {
tabBarLabel: '标题',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('./img/t2.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
title :
tabBarVisible:
tabBarIcon:
tabBarLabel:
Navigator Props
The navigator component created by TabNavigator(...) takes the following props:
screenProps - Pass down extra options to child screens and navigation options, for example:
const TabNav = TabNavigator({
// config
});
<TabNav
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
结束
