美文网首页ReactNative码农的世界程序员
ReactNative中的选项卡'react-nativ

ReactNative中的选项卡'react-nativ

作者: 丿雫 | 来源:发表于2017-08-10 16:13 被阅读111次

如下效果的界面的搭建,可以借助开源的'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官网

相关文章

网友评论

    本文标题:ReactNative中的选项卡'react-nativ

    本文链接:https://www.haomeiwen.com/subject/ssjhrxtx.html