react native踩坑日记（5）：react native 设置tabs

在我们项目中难免会需要tabs组件，下面介绍三种创建tabs组件。分别是：

1. antd mobile for react native 的组件tabs，包括如何使用
2. antd mobile for react native 的组件Carousel，这是个投机取巧的方法，但是也蛮好用的
3. 使用createMaterialTopTabNavigator 创建tabs路由导航。这是个react navigation 的API

逐一分析下利弊

1. antd mobile for react native 的组件tabs，包括如何使用

这个是正经的tabs，这里需要说的是官方文档目前的版本是3.X，tabs在ios模拟器上点击上方的切换不会切换到对应的页面，在最先版的4.0已修复，所以当使用antd mobile时请安装4.0版本

看了好多人反应，如果打开可以左右滑动切换会异常灵敏，也就是说在上下滑动的时候，就可能触发左右切换，所以官方建议禁用掉滑动切换，也防止与ios的左滑手势冲突，官方说明如下

npm i @ant-design/[e-mail]4.0 // or
yarn add @ant-design/[e-mail]4.0

使用方式请参照官方文档，这里要说的是自定义顶部tabs时要注意的点。

<Tabs
          tabs={tabs}
          renderTabBar={tabProps => (
            <View
              style={{
                paddingHorizontal: 16,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-evenly',
              }}
            >
              {tabProps.tabs.map((tab, i) => (
                // change the style to fit your needs
                <TouchableOpacity
                  activeOpacity={0.9}
                  key={tab.key || i}
                  style={{
                    // width: '30%',
                    padding: 6,
                  }}
                  onPress={() => {
                    const { goToTab, onTabClick } = tabProps;
                    // tslint:disable-next-line:no-unused-expression
                    onTabClick && onTabClick(tabs[i], i);
                    // tslint:disable-next-line:no-unused-expression
                    goToTab && goToTab(i);
                  }}
                >
                  <Text
                    style={{
                      color: tabProps.activeTab === i ? 'green' : undefined,
                    }}
                  >
                    {tab.title}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>
          )}
        >
          <View style={style}>
            <Text>Content of First Tab</Text>
          </View>
          <View style={style}>
            <Text>Content of Second Tab</Text>
          </View>
          <View style={style}>
            <Text>Content of Third Tab</Text>
          </View>
     </Tabs>

上面是官方提供的列子，首先我们必须绑定key值，其次选中与未选中的样式切换请使用与列子一样写法采用tabProps.activeTab === i，这样的判断，否则会不起作用

2. antd mobile for react native 的组件Carousel，这是个投机取巧的方法，但是也蛮好用的
   使用Carousel组件来做tabs切换，真的就是一种投机取巧的方法，主要是利用他的左右切换功能，好处就是可以任意设置头部tabs的样式，设置对应的点击事件即可。说到这聪明的小伙伴就已经想到要怎么使用了。

不好地方就是，他会提前加载未显示的页面，当然这并不是我们希望的，所以可以在后方的页面上加层判断，到了这个页面在渲染，但是这样处理起来也挺麻烦的。

需要注意的点

• 如果你更新到了4.0，请在style中给Carousel设置宽度和高度，否则不会显示
• 将通过ref调用Carousel中的goTo方法，跳转到指定页面

使用方法

 <Carousel
   ref={(el) => (this.slider = el)}
    style={styles.wrapper}
    selectedIndex={0}
    autoplay={false}
    afterChange={(current) => this.setState({isIndex: current})}
    dots={false}>
    {component.map((item, i) => {
      return <View style={styles.tabsBox}>{item}</View>;
    })}
  </Carousel>

  triggerOnPress = (i) => {
    this.setState({
      isIndex: i,
    });
    this.slider.goTo(i);
  };

上面的component是我自己封装的组件，你换成自己的就好，当你需要跳转到指定页面的时候调用triggerOnPress这个方法传递过来index即可

3. 使用createMaterialTopTabNavigator 创建tabs路由导航。这是个react navigation 的API

这个也是正经的tabs，使用react navigation提供的createMaterialTopTabNavigator，创建一个二级页面内的路由切换。使用方式如下：点击查看这位大佬写的很详细，也很清楚，我就不写了，我就说一下缺点。

• 头部切换按钮自定义样式不好修改
• 无法设置头部的背景图片，当然设置背景图片样式是我的项目中需要的，如果你的没有那么我建议你使用它。

综合建议

1. 如果你的样式很简单，且项目中已经引用了react navigation，那么我建议你首选createMaterialTopTabNavigator，这样就少引入一些东西，且方便管理
2. 如果你的样式稍微有点复杂，且对性能上一次性不需要加载那么多东西，我建议你使用antd mobile for react native 的组件tabs
3. 如果你的样式很复杂，还有很复杂的交互效果，我建议你使用antd mobile for react native 的组件Carousel，他可以把切换的按钮单独拎出来，尽情发挥的创意，且不受切换页面的影响