React Native之旅03－控件Navigator

1、Navigator

使用导航器可以让你在应用的不同场景（页面）间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene
方法，导航栏可以根据指定的路由来渲染场景。

下面就来看下它的简单的用法
1、设置一个默认的场景（页面）

var NavigatorDemo = React.createClass({
    render: function () {
        var defaultName = '首页';
        var defaultComponent = Home;
        return (
            <Navigator
                initialRoute={{ name: defaultName, component:defaultComponent }}
                configureScene={() => {
                    return Navigator.SceneConfigs.VerticalDownSwipeJump;
                }}
                renderScene={(route, navigator) => {
                    let Component = route.component;
                    if(route.component) {
                      return <Component title={route.title} navigator={navigator} />
                    }
                 }}
                style={styles.container}
            />
        );
    }});

(1)、initialRoute

定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。initialRoute必须是initialRouteStack中的一个路由。initialRoute默认为initialRouteStack中最后一项。

(2)、configureScene

(可选参数)
这个就是页面之间跳转时候的动画
用来配置场景动画和手势。会带有一个路由参数调用，然后它应当返回一个场景配置对象

(3)、renderScene

用来渲染指定路由的场景。调用的参数是路由和导航器。

在renderScene的回调里的两个参数:route, navigator其实就是我们传递的name,component这两个参数
我们加了一个判断，如果传递进来的component存在，那我们就是返回一个这个component

接着是我们设置的渲染的Home页面
Home.android.js

var Home = React.createClass({
    render: function () {
        return (
            <View style={styles.bg}>
                <TouchableHighlight onPress={this._onPressButton}>
                    <Text style={styles.text}>go to next page</Text>
                </TouchableHighlight>
            </View>
        );
    },
    _onPressButton: function () {
        this.props.navigator.push({
            component: Next, 
       }); 
   },
});

2、跳转一个到页面
(1)、push(route)

• 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去

接着是我们从Home跳转到的Next页面
Next.android.js

var Next = React.createClass({
    render: function () {
        return (
            <View style={styles.bg}>
                <TouchableHighlight onPress={this._onPressButton}>
                    <Text style={styles.text}>back</Text>
                </TouchableHighlight>
            </View>
        );
    },
    _onPressButton: function () {
        this.props.navigator.pop();
    },
});

最后是几张截图

Navigator还有一些其它的用法，比如页面之间的传值等等，等研究过后在来写学习心得

欢迎留言或私信交流，谢谢

转载请注明转载地址：http://www.jianshu.com/p/671911fda51f
React Native之旅03－控件Navigator