react-native 滑动标题栏

在我们的应用中经常有上面显示一行标题栏，下面分别每个标题对应一个页面，标题栏与页面联动的情形，在Android中我们可以简单用Toolbar和ViewPager来实现，react-native中至今还没有提供原生的组件供我们来应用，但我们可以通过依赖github大神skv-headless的react-native-scrollable-tab-view（https://github.com/skv-headless/react-native-scrollable-tab-view）来实现相应的功能。 
首先我们还是要切换到我们的项目目录下，运行 npm install react-native-scrollable-tab-view –save，来将项目依赖进我们的项目中。 

现在，我们就可以在我们的项目中使用。首先

import ScrollableTabView from 'react-native-scrollable-tab-view';

• 1

再将ScrollableTabView组件添加进我们的代码中：

<ScrollableTabView
                        renderTabBar={()=><CustomTabBar/>}
                        style={{flex:1,backgroundColor:'white'}}
                        tabBarBackgroundColor="white"
                        tabBarInactiveTextColor="#494949"
                        tabBarActiveTextColor="#00A9F2"
                        tabBarUnderlineStyle={{backgroundColor:'#00A9F2'}}
                    >
                        <FindList tabLabel="精选"/>
                        <FindList tabLabel="同城"/>
                        <FindList tabLabel="资讯"/>
                        <FindList tabLabel="活动"/>
                        <FindList tabLabel="话题"/>
                    </ScrollableTabView>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• renderTabBar 可以指定我们自定义TabBar组件
• tabBarBackgroundColor tabBar背景的颜色
• tabBarInactiveTextColor tab没有被选中时的字体颜色
• tabBarActiveTextColor tab被选中时的字体颜色
• tabBarUnderlineStyle 定义下划线的样式
• tabBarTextStyle 设置tab文本的样式 例：{fontFamily: ‘Roboto’, fontSize: 15}
• initialPage number 设置初始选中的page

FindList是对应滑动的页面，tabLabel即为该页面对应的tab文本值。

截图： 

源码

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CSDN_GYG/article/details/71194234

在我们的应用中经常有上面显示一行标题栏，下面分别每个标题对应一个页面，标题栏与页面联动的情形，在Android中我们可以简单用Toolbar和ViewPager来实现，react-native中至今还没有提供原生的组件供我们来应用，但我们可以通过依赖github大神skv-headless的react-native-scrollable-tab-view（https://github.com/skv-headless/react-native-scrollable-tab-view）来实现相应的功能。 
首先我们还是要切换到我们的项目目录下，运行 npm install react-native-scrollable-tab-view –save，来将项目依赖进我们的项目中。 

现在，我们就可以在我们的项目中使用。首先

import ScrollableTabView from 'react-native-scrollable-tab-view';

• 1

再将ScrollableTabView组件添加进我们的代码中：

<ScrollableTabView
                        renderTabBar={()=><CustomTabBar/>}
                        style={{flex:1,backgroundColor:'white'}}
                        tabBarBackgroundColor="white"
                        tabBarInactiveTextColor="#494949"
                        tabBarActiveTextColor="#00A9F2"
                        tabBarUnderlineStyle={{backgroundColor:'#00A9F2'}}
                    >
                        <FindList tabLabel="精选"/>
                        <FindList tabLabel="同城"/>
                        <FindList tabLabel="资讯"/>
                        <FindList tabLabel="活动"/>
                        <FindList tabLabel="话题"/>
                    </ScrollableTabView>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• renderTabBar 可以指定我们自定义TabBar组件
• tabBarBackgroundColor tabBar背景的颜色
• tabBarInactiveTextColor tab没有被选中时的字体颜色
• tabBarActiveTextColor tab被选中时的字体颜色
• tabBarUnderlineStyle 定义下划线的样式
• tabBarTextStyle 设置tab文本的样式 例：{fontFamily: ‘Roboto’, fontSize: 15}
• initialPage number 设置初始选中的page

FindList是对应滑动的页面，tabLabel即为该页面对应的tab文本值。

截图： 

源码