reactNative的选项卡

xiaoxiao2021-02-27  246

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

转载请注明原文地址: https://www.6miu.com/read-10294.html

最新回复(0)