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
