React Native笔记5——页面的跳转

首先想强调一个概念，React Native的“页面”并不像安卓，一个页面对应一个Activity。其实在React Native中的Component，可以充当组件的角色，也可以充当页面的角色，就看你怎么用了。但是一个js文件又可以包含多个Component，为了避免逻辑混乱，还是建议一个界面对应一个js。以后再看看大神们是怎么设计的吧，为了方便，这里的Demo就写在了一个js文件里了，嫑嫌弃。
参考视频
中文文档

新建一个navigator.js文件, 主组件为Nav, 并向外暴露.

可以实现跳转的组件有:NavigatorIOS , Navigator , React Navigation，可以翻译为导航器。首先准备两个页面: firstPage，secondPage , 各有一个按钮, 相互跳转:
准备页面:

class firstPage extends Component {
    press_next() {
        //点击按钮 ,下一界面
    };

    render() {
        return (
            <View style={[styles.flex, {backgroundColor: 'yellow'}]}>
                <TouchableOpacity onPress={} style={styles.btn}>
                    <Text>点击退出下一级页面</Text>
                </TouchableOpacity>
            </View>
        )
    };
}

//定义第二个页面
class secondPage extends Component {
    render() {
        return (
            <View style={[styles.flex, {backgroundColor: 'cyan'}]}>
                <TouchableOpacity onPress={} style={styles.btn}>
                    <Text>点击退回上一级页面</Text>
                </TouchableOpacity>
            </View>
        )
    };

    press_pre() {
        //点击按钮 ,上一界面
    };
}

然后在主组建中定义(初始化)Navigator , 在之后的操作中

export default class Nav extends Component {
    render() {
        // 指定首次显示的界面为firstPage
        var rootRoute = {
            component: firstPage
        };
        return (
            <Navigator
                /* 第一步: 设置属性initRoute, 设置路由
                 必须包含的属性:component
                 */
                initialRoute={rootRoute}

                /**
                * 第二步: configureSence 配置跳转场景
                */
                configureScene={(route) => {
                    return Navigator.SceneConfigs.PushFromRight //从右向左
                }}

                /**
                * 第三步: renderSence 渲染场景
                * 参数:
                * 1. route 第一步设置的路由对象
                * 2. Navigator 导航对象
                * 实现:
                * 给需要显示的组件设置属性
                */
                renderScene={(route, navigator) => {
                    // 从route对象中获取页面组件
                    var Minuit = route.component;
                    return (<Minuit navigator={navigator} {...route.passProps}/>);
                }}
            ></Navigator>
        )
    }
}