实现头部菜单滑动

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

效果图:

image.png

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才会渲染:

image.png

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
  },

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容