React-Native-TabNavigator切换页面（一）

RN要想实现iOS中tabbar的效果，通用的就是用第三方的react-native-tab-navigator了，很好很强大，在此记录使用这个进行页面切换的效果

首先先下载 React-native-tab-navigator

npm install react-native-tab-navigator --save//我在save前面使用一个-竟然不行，也是666

然后在项目中导入

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 (

          <View style={HomePageStyle.viewStyle}>

//初始化tabbar
              <TabNavigator>
//初始化tabbarItem

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

                  <TabNavigator.Item
                      title='消息'
                      onPress={()=>{this.setState({selectedTab:'消息'})}}
                      selected={this.state.selectedTab === '消息'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      <SecondPage/>
                  </TabNavigator.Item>

                  <TabNavigator.Item
                      title='联系人'
                      onPress={()=>{this.setState({selectedTab:'联系人'})}}
                      selected={this.state.selectedTab === '联系人'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      <ThirdPage/>
                  </TabNavigator.Item>

                  <TabNavigator.Item
                      title='我的'
                      onPress={()=>{this.setState({selectedTab:'我的'})}}
                      selected={this.state.selectedTab === '我的'}
                      titleStyle={HomePageStyle.TBarTitleStyle}
                      selectedTitleStyle={HomePageStyle.TBarTitleSelectStyle}
                  >
                      <FourPage/>
                  </TabNavigator.Item>


              </TabNavigator>


          </View>

        );
    }
}
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 (
            <View style={FirstStyle.ViewStyle}>

                <Text style={FirstStyle.textStyle}>
                    第一个页面
                </Text>
            </View>
        );
    }
}
const FirstStyle = StyleSheet.create({
    ViewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red',
    },
    textStyle: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
AppRegistry.registerComponent('myTabBarAndNavigationTest', () => FirstPage);

tabbargif.gif

项目地址：https://github.com/chjwrr/RN-tabbar-navigation