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）来实现。

最终效果图：

<未完 待续>