TabBarIOS底部标签栏，一般和顶部导航栏 NavigatorIOS相结合使用，这里简单介绍一下
前面学习了NavigatorIOShttp://www.jianshu.com/p/48109fd8e2bb
这里就只介绍TabBarIOS的一些属性
-
barTintColor：标签栏的背景颜色。 -
tintColor：当前被选中的标签图标的颜色。 -
unselectedTintColor：未被选中的标签图标的颜色。 -
unselectedItemTintColor：当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效 -
translucent：一个布尔值，决定标签栏是否需要半透明化。
在开始学习创建TabBarIOS之前，先了解TabBarIOS.Item，TabBarIOS.Item是TabBarIOS中每个单独的标签
TabBarIOS.Item的主要属性：
-
selected：当前的TabBarIOS.Item是否被选中 -
onPress：选中调用的方法，一般需要将当前selected的值至为true -
icon：当前TabBarIOS.Item的标签图标，本案例没有用到
另外需要给TabBarIOS.Item设置一个对应显示的界面
创建一个TabBarIOS，并设置一个TabBarIOS.Item：
<TabBarIOS unselectedTintColor={"#1faaaa"}
tintColor={"#ff1111"}
barTintColor={'#aaaaaa'}
translucent={true}>
<TabBarIOS.Item title="one"
//这里根据当前的状态判断一下是否被选中了
selected={this.state.selectTab === '0'}
onPress={()=>{
this.setState({
selectTab: '0'
})}}>
<View>...</View>
</TabBarIOS.Item>
</TabBarIOS>
知道了如何创建TabBarIOS以及设置TabBarIOS.Item，我们就应该知道在哪设置当前界面的样式，现在开始将TabBarIOS.Item对应的显示界面设置为 NavigatorIOS
首先创建一个类返回NavigatorIOS
class NavigatorIOSView extends Component {
render(){
return(
<NavigatorIOS ref="nav"
style={{flex: 1}}
initialRoute={{
component: MianView,
title: this.props.title,
rightButtonTitle: 'NA1 ',
onRightButtonPress: ()=> {
this.refs.nav.push({
component: NaviView,
title: 'NA2',
onLeftButtonPress: () => {
this.refs.nav.pop({
});
}
})
}
}}/>
)
}
}
//MianView为NavigatorIOSView当前的界面
class MianView extends Component{
render(){
return(
<View style={{flex: 1, backgroundColor: '#ffaaff'}}>
</View>
)
}
}
//NaviView为NavigatorIOSView将要push的界面
class NaviView extends Component{
render(){
return(
<View style={{flex: 1, backgroundColor: '#af0aff'}}>
</View>
)
}
}
开始创建TabBarIOS，并在TabBarIOS.Item中设置上面的NavigatorIOSView为它的显示界面
export default class RNTabBarIOSView extends Component {
constructor(props){
super(props);
this.state = {
selectTab: '0'
}
}
render(){
return(
<TabBarIOS unselectedTintColor={"#1faaaa"}
tintColor={"#ff1111"}
barTintColor={'#aaaaaa'}
translucent={true}>
<TabBarIOS.Item title="one"
selected={this.state.selectTab === '0'}
onPress={()=>{
this.setState({
selectTab: '0'
})}}>
{<NavigatorIOSView title="aaaa"/>}
</TabBarIOS.Item>
<TabBarIOS.Item title="two"
selected={this.state.selectTab === '1'}
onPress={()=>{
this.setState({
selectTab: '1'
})}}>
{<NavigatorIOSView title="bbbb"/>}
</TabBarIOS.Item>
<TabBarIOS.Item title="therr"
selected={this.state.selectTab === '2'}
onPress={()=>{
this.setState({
selectTab: '2'
})}}>
{<NavigatorIOSView title="cccc"/>}
</TabBarIOS.Item>
</TabBarIOS>
)
}
}
在这里需要了解下，将NavigatorIOS提到到单独一个类中，而不是放到和TabBarIOS同一个类中，是因为NavigatorIOS中用到了this，同一个类中关于this的同一个设置只会保留最后一个有效，如果放在一个类中会发生在NavigatorIOS中的this.refs.nav.push只会在第三个TabBarIOS.Item中有效，需要注意
看看最后的效果：
Untitled2.gif
