在我们项目中难免会需要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/react-native@4.0 // or
yarn add @ant-design/react-native@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，他可以把切换的按钮单独拎出来，尽情发挥的创意，且不受切换页面的影响

目前项目搁置了，转投另外一个项目了，后续如果还会继续开发有新的坑会继续分享