ReactNative中的选项卡'react-nativ

如下效果的界面的搭建，可以借助开源的'react-native-scrollable-tab-view'

react-native-scrollable-tab-view.gif

1.打开终端，进入到项目的根目录下，添加'react-native-scrollable-tab-view'

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

2.在使用的js文件中导入

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

3.

导入我们创建的四个js文件

import LatestRecord from './LatestRecord';  //最新收录
import LatestComment from './LatestComment';//最新评论
import HotTopic from './HotTopic';//热门
import Member from './Member';//成员

react-native-scrollable-tab-view主要实现

 <ScrollableTabView
                    style={{width:theme.screenWidth,height:theme.screenHeight-theme.actionBar.height}}
                    tabBarUnderlineStyle = {{backgroundColor:'red',height:px2dp(3)}} //设置选中的Tab文字下方横线的样式
                    tabBarBackgroundColor= 'white' //Tab的背景颜色
                    tabBarActiveTextColor = 'red' //设置选中的Tab文字的颜色
                    tabBarInactiveTextColor = 'gray' //设置未必选中的Tab文字的颜色
                    tabBarTextStyle = {{fontSize:px2dp(30)}} //设置Tab上字体的样式
                    initialPage={2}//初始化被选中的tab下标，默认0
                     onChangeTab = {()=>{
                         Keyboard.dismiss()
                     }}>//切换tab时候调用
                    <LatestRecord tabLabel = '最新收录'/>
                    <LatestComment tabLabel = '最新评论'/>
                    <HotTopic tabLabel = '热门'/>
                    <Member tabLabel = '成员'/>

                </ScrollableTabView>

---

如果还需要其他设置可以参照，react-native-scrollable-tab-view官网 。