reactNative的选项卡

最新推荐文章于 2024-08-16 09:36:18 发布

慕容屠苏

最新推荐文章于 2024-08-16 09:36:18 发布

阅读量2.9k

点赞数

分类专栏： reactNative 文章标签： reactNative 选项卡

本文链接：https://blog.csdn.net/kerryqpw/article/details/71189418

版权

reactNative 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

reactNative的水平切换菜单

实现效果：

准备工作：

npm install react-native-scrollable-tab-view

props介绍：

tabBarUnderlineStyle(style)
设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
tabBarBackgroundColor(String)
设置整个Tab这一栏的背景颜色
tabBarActiveTextColor(String)
设置选中Tab的文字颜色
tabBarInactiveTextColor(String)
设置未选中Tab的文字颜色
tabBarTextStyle(Object)
设置Tab文字的样式，比如字号、字体等

实现代码：

<ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
                {
                    this.state.languages.map((item,i)=>{
                        return (item.checked) ? <PopularTab {...this.props} key={`tab${i}`} tabLabel={item.name}/> : null;
                    })
                }
</ScrollableTabView>

注意：每个被包含的子视图需要使用 tabLabel属性，表示对应Tab显示的文字

参考博客：http://www.jianshu.com/p/b7788c3d106e