React-Navigation TabNavigator切换导航

参考官网：https://reactnavigation.org/docs/navigators/tab

很容易的实现多个屏幕通过选项卡来切换。如下简单的案例：

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 */}
/>

结束