TabNavigator

用于使用TabRouter轻松设置带有多个tab的页面。有关实例，请参阅我们的expo demo。

  1. class MyHomeScreen extends React.Component {
  2.   static navigationOptions = {
  3.     tabBarLabel: 'Home',
  4.     // Note: By default the icon is only shown on iOS. Search the showIcon option below.
  5.     tabBarIcon: ({ tintColor }) => (
  6.       <Image
  7.         source={require('./chats-icon.png')}
  8.         style={[styles.icon, {tintColor: tintColor}]}
  9.       />
  10.     ),
  11.   };
  13.   render() {
  14.     return (
  15.       <Button
  16.         onPress={() => this.props.navigation.navigate('Notifications')}
  17.         title="Go to notifications"
  18.       />
  19.     );
  20.   }
  21. }
  23. class MyNotificationsScreen extends React.Component {
  24.   static navigationOptions = {
  25.     tabBarLabel: 'Notifications',
  26.     tabBarIcon: ({ tintColor }) => (
  27.       <Image
  28.         source={require('./notif-icon.png')}
  29.         style={[styles.icon, {tintColor: tintColor}]}
  30.       />
  31.     ),
  32.   };
  34.   render() {
  35.     return (
  36.       <Button
  37.         onPress={() => this.props.navigation.goBack()}
  38.         title="Go back home"
  39.       />
  40.     );
  41.   }
  42. }
  44. const styles = StyleSheet.create({
  45.   icon: {
  46.     width: 26,
  47.     height: 26,
  48.   },
  49. });
  51. const MyApp = TabNavigator({
  52.   Home: {
  53.     screen: MyHomeScreen,
  54.   },
  55.   Notifications: {
  56.     screen: MyNotificationsScreen,
  57.   },
  58. }, {
  59.   tabBarPosition: 'top',
  60.   animationEnabled: true,
  61.   tabBarOptions: {
  62.     activeTintColor: '#e91e63',
  63.   },
  64. });

API说明

  1. TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs

路由配置对象是从路由名称到路由配置的映射，告诉navigator该路由渲染什么。参见StackNavigator示例。

TabNavigatorConfig

未完待续。。。