React-Native TabBarIOS结合NavigatorIOS使用小结

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：

                {
                    this.setState({
                        selectTab: '0'
                    })}}>
                    ...
                
 

知道了如何创建TabBarIOS以及设置TabBarIOS.Item，我们就应该知道在哪设置当前界面的样式，现在开始将TabBarIOS.Item对应的显示界面设置为 NavigatorIOS

首先创建一个类返回NavigatorIOS

class NavigatorIOSView extends Component {
    render(){
        return(
             {
                                  this.refs.nav.push({
                                      component: NaviView,
                                      title: 'NA2',
                                      onLeftButtonPress: () => {
                                          this.refs.nav.pop({

                                          });
                                      }
                                  })
                              }
                          }}/>
        )
    }
}
//MianView为NavigatorIOSView当前的界面
class MianView extends Component{
    render(){
        return(
            

            
        )
    }
}
//NaviView为NavigatorIOSView将要push的界面
class NaviView extends Component{
    render(){
        return(
            

            
        )
    }
}

开始创建TabBarIOS，并在TabBarIOS.Item中设置上面的NavigatorIOSView为它的显示界面

export default class RNTabBarIOSView extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectTab: '0'
        }
    }

    render(){
        return(
            
                {
                    this.setState({
                        selectTab: '0'
                    })}}>
                    {}
                

                {
                    this.setState({
                        selectTab: '1'
                    })}}>
                    {}
                

                {
                    this.setState({
                        selectTab: '2'
                    })}}>
                    {}
                
            
        )
    }
}

在这里需要了解下，将NavigatorIOS提到到单独一个类中，而不是放到和TabBarIOS同一个类中，是因为NavigatorIOS中用到了this，同一个类中关于this的同一个设置只会保留最后一个有效，如果放在一个类中会发生在NavigatorIOS中的this.refs.nav.push只会在第三个TabBarIOS.Item中有效，需要注意

看看最后的效果：

Untitled2.gif