ReactNative页面切换react-navigation导航器之TabNavigator的使用

  发布日期:   2018-01-27
  最新修改:   2020-10-22
  阅读次数:   597 次

一、前言:

  • 我们在前面已经学习了StackNavigator的基本使用,TabNavigator的使用方式基本与StackNavigator差不多

二、入坑

  • 同样,我们第一步创建一个导航器,然后将页面组件放入进行初始化

      const RootTabs = TabNavigator({
          User: {
              screen: UserPager
          },
          Ticket: {
              screen: TicketPager
          },
          Order: {
              screen: OrderPager
          }
      },{
          tabBarPosition: 'bottom',
          animationEnabled: true,
          tabBarOptions: {
              activeTintColor: '#e91e63',
          }}
      );
    
      export default class HomePager extends Component {
          render() {
              return <RootTabs />;
          }
      }

    配置tab名称和icon

  • 默认的,如果配置,tab中label默认显示的名称即为页面对应的name(User,Ticket,Order),当然你可以直接把它改成你想要的名字,但是这是不符合实际需要的,而且我们一般还会有icon

  • 需要实现上面要求,我们可以通过在陪你screen时传入第二个参数:navigationOptions

  • 代码如下

      const RootTabs = TabNavigator({
          User: {
              screen: UserPager,
              navigationOptions:{
                  tabBarLabel: '个人',
                  tabBarIcon: ({ tintColor }) => (
                      <Image
                          source={require('./chats-icon.png')}
                          style={[styles.icon, {tintColor: tintColor}]}
                      />
                  ),
              }
          },
          Ticket: {
              screen: TicketPager,
              navigationOptions:{
                  tabBarLabel: '个人',
                  tabBarIcon: ({ tintColor }) => (
                      <Image
                          source={require('./chats-icon.png')}
                          style={[styles.icon, {tintColor: tintColor}]}
                      />
                  ),
              }
          },
          Order: {
              screen: OrderPager,
              navigationOptions:{
                  tabBarLabel: '个人',
                  tabBarIcon: ({ tintColor }) => (
                      <Image
                          source={require('./chats-icon.png')}
                          style={[styles.icon, {tintColor: tintColor}]}
                      />
                  ),
              }
          }
      },{
          tabBarPosition: 'bottom',
          animationEnabled: true,
          tabBarOptions: {
              activeTintColor: '#e91e63',
          },
    
      }
          ,
      );
    
      export default class HomePager extends Component {
          render() {
              return <RootTabs />;
          }
      }
  • 通过传入navigationOptions我们可以设置标题、图标等


  • 如上创建了三个页面,android默认tab是在顶部的,ios在底部,我们可以通过在创建的时候传入第二个配置参数对象来进行配置,如 :
  • tabBarPosition: 'bottom|top' - tab位置
  • animationEnabled: true|false -切换时是否需要动画
  • tabBarComponent: -自定义tab组件,看个人需求
  • swipeEnabled:true|false -是否开启滑动
  • configureTransition(currentTransitionProps,nextTransitionProps) : 配置两个tab间切换的动画,定义时需要返回一个configuration 对象去描述动画的执行
  • initialLayout : 可选的,配置一个初始化的宽度和高度,通过配置initialLayout可以防止 react-native-tab-view 渲染的延迟
  • initialRouteName: 配置第一个初始化的页面
  • order:定义tabar中每个 tab的顺序
  • paths:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径
  • backBehavior:定义按下返回按钮的行为,默认在tabs页面,其会返回到初始化默认路由页面,默认为initialRoute行为,不需要则设置为none
  • tabBarOptions: 配置tabar中每个tab的参数,如样式等
  • IOS的样式

    • activeTintColor - 处于选中状态的Label and icon color
    • activeBackgroundColor - 选中状态时的tab的背景颜色
    • inactiveTintColor - 非选中状态的Label and icon color
    • inactiveBackgroundColor - 非选中状态时的tab的背景颜色
    • showLabel - tab中是否展示label, 默认是 true,只需要图片着设置为false
    • style - tab bar的样式 .
    • labelStyle - tab label的样式
    • tabStyle - tab的样式
    • allowFontScaling - lable中的文字的大小是否动变大或缩小
  • Android的样式

    • activeTintColor - 处于选中状态的Label and icon color
    • activeBackgroundColor - 选中状态时的tab的背景颜色
    • showLabel - tab中是否展示label, 默认是 true,只需要图片着设置为false
    • pressColor -压下时的颜色,android5.0之后生效
    • pressOpacity - 压下时的透明度,android小于5.0
    • scrollEnabled - tab数量多时是否可滚动
    • tabStyle - tab的样式
    • labelStyle - tab label的样式
    • tabStyle - tab的样式
    • style - tab bar的样式 .
    • allowFontScaling - lable中的文字的大小是否动变大或缩小
    • upperCaseLabel -label中字母是否按大写显示,默认ture
    • indicatorStyle - 指示器的样式

Screen Navigation Options

  • title 生成一个可以作为返回作用的头部title和tabBarLabel
  • tabBarVisible - tabBar 是否可见,默认true
  • swipeEnabled - 子选项卡可重写TabNavigatorConfig 设置的swipeEnabled属性,
  • tabBarIcon React Element or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in tab bar.
  • tabBarLabel Title string of a tab displayed in the tab bar or React Element or a function that given { focused: boolean, tintColor: string } returns a React.Node, to display in tab bar. When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
  • tabBarOnPress Callback to handle tap events; the argument is an object containing: the previousScene: { route, index } which is the scene we are leaving the scene: { route, index } that was tapped the jumpToIndex method that can perform the navigation for you Useful for adding a custom logic before the transition to the next scene (the tapped one) starts.

Navigator Props

  • 通过Navigator Props 除来navigator默认传递的,我们可以将一些数据通过props传递给选项卡页面

      const TabNav = TabNavigator({
          // config
      });
    
      < TabNav
          screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
       />

   转载规则

《ReactNative页面切换react-navigation导航器之TabNavigator的使用字》GajAngels 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。