很容易的實現(xiàn)多個屏幕通過選項卡來切換冯事。如下簡單的案例：
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 : 使用作為標(biāo)簽欄的組件，例如TabBarBottom(這是iOS的默認(rèn)值)献雅，TabBarTop(這是Android的默認(rèn)值)
tabBarPosition : 標(biāo)簽欄位置谤绳，可以是top或者bottom占锯。
swipeEnabled: 是否允許在選項卡之間滑動。
animationEnabled: 更改選項卡的時候是否有動畫缩筛。
lazy:選項卡顯示時消略，是否延遲，而不是直接顯示瞎抛。
initialRouteName: 第一次加載時初始標(biāo)簽路徑的routeName
order: 排序艺演，定義一個數(shù)組來排序路由。
paths: 提供一個路由映射。它將覆蓋routeConfigs中設(shè)置的路徑胎撤。
backBehavior: 按后退按鈕是否切換到初始選項卡晓殊。
tabBarOptions :設(shè)置切換欄樣式，具體如下：
IOS參數(shù)：
activeTintColor： 設(shè)置活動標(biāo)簽的圖標(biāo)和顏色伤提。
activeBackgroundColor: 設(shè)置活動標(biāo)簽的背景色巫俺。
inactiveTintColor: 設(shè)置非活動標(biāo)簽的圖標(biāo)和顏色。
inactiveBackgroundColor : 設(shè)置非活動標(biāo)簽的背景色肿男。
showLabel: 是否顯示label介汹，默認(rèn)為顯示。
style: tabbar總的樣式舶沛。
labelStyle： label的樣式
tabStyle: 切換卡項的樣式嘹承。
Android參數(shù)：
activeTintColor:
inactiveTintColor:
showIcon:
showLabel:
upperCaseLabel:
pressColor:
pressOpacity:
scrollEnabled:
tabStyle:
indicatorStyle:
labelStyle:
iconStyle:
style:
static navigationOptions
static navigationOptions = {
tabBarLabel: '標(biāo)題',
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 */}
/>
結(jié)束
