React-Native-TabNavigator切换页面

RN实现页面切换效果
首先先下载 React-native-tab-navigator

npm install react-native-tab-navigator --save

然后在项目中导入

import TabNavigator from 'react-native-tab-navigator'

再然后就可以愉快的使用了
所属关系：TabNavigator-> TabNavigator.Item-> component(页面)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

//导入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator'

//导入对应的四个页面
import FirstPage from './FirstPage'
import SecondPage from './SecondPage'
import ThirdPage from './ThirdPage'
import FourPage from './FourPage'

export default class HomePage extends Component {
    constructor(props) {
        super(props);

//先声明一个状态，这个状态为了改变tabbar的
//点击tabbar，触发onPress方法，在里面改变状态，从而达到切换页面的效果

        this.state = {
            selectedTab:'首页'
            //默认选择第一个页面（'消息'默认选择第二个页面）
            //this.setState({selectedTab:'首页'}) 这个用于切换页面
            //selectedTab：'' ->为不同的值，就切换对应的页面
        };
    }

    render() {
        return (

          

//初始化tabbar
              
//初始化tabbarItem

                  {this.setState({selectedTab:'首页'})}}
                      selected={this.state.selectedTab === '首页'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
//加载页面
                      
                  

                  {this.setState({selectedTab:'消息'})}}
                      selected={this.state.selectedTab === '消息'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      
                  

                  {this.setState({selectedTab:'联系人'})}}
                      selected={this.state.selectedTab === '联系人'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      
                  

                  {this.setState({selectedTab:'我的'})}}
                      selected={this.state.selectedTab === '我的'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      
                  
              
          
        );
    }
}
var HomePageStyle = StyleSheet.create({

    viewStyle:{
      flex:1,
    },
    TBarTitleStyle:{
        color:'black',
    },
    TBarTitleSelectStyle:{
        color:'red',
    },

});
AppRegistry.registerComponent('myTabBarAndNavigationTest', () => HomePage);

其他页面简单了写个view,这里贴出第一个页面的代码，其他雷同

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator'

export default class FirstPage extends Component {
    constructor(props){
        super(props);
        this.state ={
          selectedTab:'home'
        };
    }
    render() {
        return (
            
                
                    第一个页面
                
            
        );
    }
}
const FirstStyle = StyleSheet.create({
    ViewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
    },
    textStyle: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
AppRegistry.registerComponent('myTabBarAndNavigationTest', () => FirstPage);

参考链接：
https://www.jianshu.com/p/5e416ab7023a