实现头部菜单滑动

react-native-scrollable-tab-view实现头部菜单滑动：

效果图：

1、安装：

npm install react-native-scrollable-tab-view --save

2、在使用页面引入：

import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from "react-native-scrollable-tab-view";

3、TabBar有DefaultTabBar和ScrollableTabBar两种，使用ScrollableTabBar，可以使菜单滑动。

（1）添加一个开关控制（注意：不添加开关控制会出现内容不显示的问题）：

constructor(props) {
    super(props);
    this.state = {
      tabShow: false
    };
  }

（2）在render之后，将状态设为true：

componentDidMount() {
    setTimeout(() => {
      this.setState({
        tabShow: true
      });
    }, 0);
  }

（3）添加数据：

<Query query={topCategoriesQuery}>
            {({ loading, error, data }) => {
              if (!(data && data.categories)) return null;
              return this.renderScrollableTab(data.categories);
            }}
          </Query>

（4）render的时候判断开关是否为true，只有状态为true才会渲染：

tabBarUnderline: {
    backgroundColor: "transparent",
    height: 2
  },
  scrollableTabBar: {
    height: Divice.STATUSBARHEIGHT + 20,
    borderBottomWidth: 1,
    borderBottomColor: Colors.lightBorderColor,
    width: width - 89
  },
  scrollableTab: {
    height: Divice.STATUSBARHEIGHT + 19,
    paddingLeft: 15,
    paddingRight: 15
  },