React Native之导航器Navigator实现导航功能（二）

1、上一篇我们实现了一个界面跳转的小功能，这一篇我们的目标是利用Navigator实现一个tab切换的功能。要实现这个功能，就不得不对Navigator这个组件有足够的了解。
上一篇我们知道了，initialRoute和renderScene的作用是展示一个界面，使用navigator的引用及其方法进行界面跳转。
下面，我们就必须知道initialRouteStack和navigationBar的作用了。

initialRouteStack：提供一个路由集合用来初始化。如果没有设置初始路由的话则必须设置该属性。如果没有提供该属性，它将被默认设置成一个只含有initialRoute的数组。

navigationBar：提供一个在场景切换的时候保持的导航栏。

具体使用方法是怎么样呢？经过试验，我们需要自己做一个导航栏组件，然后给navigationBar使用。而具体的切换等逻辑功能是通过事件来执行。

navigationBar = {<MainNavBar 
                    changeTab={
                        (index, navigator) => {
                            navigator.jumpTo(tabs[index])
                        }
                    }
                />}

下面是index.js的具体代码：

import React , { Component } from 'react';
import { Navigator,AppRegistry,TouchableOpacity,Text,View} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
import SecondPageComponent from './SecondPageComponent';
import ThirdPageComponent from './ThirdPageComponent';
import MainNavBar from './MainNavBar'
const tabs = [{Component:FirstPageComponent,name:"FirstPageComponent"},{Component:SecondPageComponent,name:"SecondPageComponent"},{Component:ThirdPageComponent,name:"ThirdPageComponent"}];
class App extends Component {
    render() {
        return (
            <Navigator
                initialRoute = {tabs[0]}
                renderScene = {(route,navigator) => {
                    let Component = route.Component;
                    return <Component navigator={navigator}/>
                }}
                initialRouteStack = {tabs}
                navigationBar = {<MainNavBar 
                    changeTab={
                        (index, navigator) => {
                            navigator.jumpTo(tabs[index])
                        }
                    }
                />}
            >
            </Navigator>
        )
    }
}

AppRegistry.registerComponent('AwesomeProject', () => App);

我们这里面的MainNavBar组件是重点，用于抛出一个组件来执行相应的事件，很简单，组件代码如下：

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

import SecondPageComponent from './SecondPageComponent';

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentIndex: 0
        };
    }
    changeTab(index,isJump = true) {
        this.setState({currentIndex: index});
        isJump&&this.props.changeTab(index, this.props.navigator)
    }
    render() {
        return (
            <View style={[styles.container]}>
                <TouchableOpacity style={(this.state.currentIndex == 0)?[styles.select]:[styles.flexCenter]} onPress={() => this.changeTab(0)}>
                    <Text>首页</Text>
                </TouchableOpacity>
                <TouchableOpacity style={(this.state.currentIndex == 1)?[styles.select]:[styles.flexCenter]} onPress={() => this.changeTab(1)}>
                    <Text>消息</Text>
                </TouchableOpacity>
                <TouchableOpacity style={(this.state.currentIndex == 2)?[styles.select]:[styles.flexCenter]} onPress={() => this.changeTab(2)}>
                    <Text>我的</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        // position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        height:50,
        flexDirection:'row',
        backgroundColor:'#F0F0F0',
    },
    flexCenter:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    select: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:"#3E7990"
    }
})

剩下的类似
import FirstPageComponent from ‘./FirstPageComponent’;

import SecondPageComponent from ‘./SecondPageComponent’;

import ThirdPageComponent from ‘./ThirdPageComponent’;

这三个组件代码就是具体的展示代码，例如其中一个就是这样：

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



export default class Home extends Component {
    render() {
        return (
            <View style={[styles.container]}>
                <Text>我是SecondPageComponent</Text>

            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        backgroundColor: "#CCCCCC",
        flex:1,
        justifyContent: "center",
        alignItems: "center"
    }
})

我的理解：实现这个切换的tab需要Navigator的navigationBar来导入一个组件，这个组件点击某一个，就展示某一个界面，而这些界面都放在initialRouteStack这个属性的属性值中。切换界面的核心就是通过navigator引用的jumpTo（@Parm）来实现。

最终效果图：

<未完 待续>