React-Native TabBarIOS结合Navigato

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