React-Native:新手理解Navigator

这是一个简单的例子，用Navigator来跳转页面，页面之间传递参数 (代码是ES6语法写的):

export default class SampleComponent extends React.Component {
    render() {
        let defaultName = 'FirstPageComponent';
        let defaultComponent = FirstPageComponent;
        return (
        <Navigator
          initialRoute={{ name: defaultName, component: defaultComponent }}
          configureScene={(route) => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
          }} />
        );
    }
}

这里来解释一下代码:

第三行: 一个初始首页的component名字，好比我写了一个component叫HomeComponent，那么这个name就是这个组件的名字【HomeComponent】了。

第四行: 这个组件的Class，用来一下子实例化成 <Component />标签

第七行: initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面，也就是启动app以后会看到界面的第一屏。 须要填写两个参数: name 跟 component。

第八，九，十行:

configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}

这个是页面之间跳转时候的动画，具体有哪些？能够看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

最后的几行:

renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

这里是每一个人最疑惑的，咱们先看到回调里的两个参数:route, navigator。经过打印咱们发现route里其实就是咱们传递的name,component这两个货，navigator是一个Navigator的对象，为何呢，由于它有push pop jump...等方法，这是咱们等下用来跳转页面用的那个navigator对象。

return <Component {...route.params} navigator={navigator} />

这里有一个判断，也就是若是传递进来的component存在，那咱们就是返回一个这个component，结合前面 initialRoute 的参数，咱们就是知道，这是一个会被render出来给用户看到的component，而后navigator做为props传递给了这个component。

因此下一步，在这个FirstPageComponent里面，咱们能够直接拿到这个 props.navigator:

export default class FirstPageComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    _pressButton() {
        const { navigator } = this.props;
        //为何这里能够取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator做为props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
            })
        }
    }
    render() {
        return (
            <View>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>点我跳转</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

这个里面建立了一个能够点击的区域，让咱们点击能够跳到SecondPageComponent这个页面，实现页面的跳转。 如今来建立SecondPageComponent，而且让它能够再跳回FirstPageComponent:

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

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    _pressButton() {
        const { navigator } = this.props;
        if(navigator) {
            //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了
            navigator.pop();
        }
    }

    render() {
    return (
            <View>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>点我跳回去</Text>
                </TouchableOpacity>
            </View>
    );
    }
}

大功告成，能进能出了。