前言
眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.
如果喜欢我的文章，可以关注我微博:袁峥Seemygo
ReactNative之TabBariOS
- 目前主流的App,底部都有一个选项条，这个就需要用TabBariOS实现
- 一行代码，就会底部有条
<TabBarIOS></TabBarIOS>
- 常用属性
barTintColor string：标签栏的背景颜色。
style：样式
tintColor string： 当前被选中的标签图标的颜色。
unselectedItemTintColor string： 当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效
translucent bool： 一个布尔值，决定标签栏是否需要半透明化。
如何添加选项卡
- TabBarIOS.Item
- 注意：TabBarIOS.Item必须包装一个View,作为点击tabBar按钮，切换的View
<TabBarIOS.Item title='消息'
icon={{uri:'tab_recent_nor'}}
badge={10}
>
<View>
<Text>消息</Text>
</View>
</TabBarIOS.Item>
- 常用属性
badge string, number :在图标右上角显示一个红色的气泡。
icon Image.propTypes.source :给当前标签指定一个自定义的图标。如果定义了systemIcon属性， 这个属性会被忽略。
onPress function :当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。
selected bool :这个属性决定了子视图是否可见。如果你看到一个空白的页面，很可能是没有选中任何一个标签。
selectedIcon Image.propTypes.source :当标签被选中的时候显示的自定义图标。如果定义了systemIcon属性，这个属性会被忽略。如果定义了icon而没定义这个属性，在选中的时候图标会染上蓝色。
systemIcon enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') :一些预定义的系统图标。注意如果你使用了此属性，标题和自定义图标都会被覆盖为系统定义的值。
title string :在图标下面显示的标题文字。如果定义了systemIcon属性，这个属性会被忽略
选中按钮，切换界面
-
只要设置对应的tabBarItem的selected为true,就会自动跳转到对应界面
- 注意：tabBarItem的selected属性不能写死，可以搞个角标记录当前选中那个角标
监听tabBarItem的点击，修改selected属性
使用
1.订阅角标属性
constructor(props){
super(props);
this.state = {
selectIndex:0
}
}
- 2.监听tabBar点击，修改选中角标
onPress={()=>{
this.setState({
selectIndex:0
})
}}
- 3.select属性根据角标判断
selected={0==this.state.selectIndex}
应用整体代码
render() {
return (
<TabBarIOS>
<TabBarIOS.Item title='消息'
icon={{uri:'tab_recent_nor'}}
badge={10}
onPress={()=>{
this.setState({
selectIndex:0
})
}}
selected={0==this.state.selectIndex}
>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<Text>消息</Text>
</View>
</TabBarIOS.Item>
</TabBarIOS>
)
}
