React-Native之Navigator

Navigator 简单使用。详细介绍，请看React-Native中文官网#navigator

---

• navigator 单标签

<Navigator />

• navigator 三个重要属性

/* 关键代码 */
import RootView from '您的路径';/* RootView 首字母大写 */

var rootRoute = {
    component: RootView,//组件
    title: this.state.title,
    /* 这里除了component外，其余多参数的话，可以合并参数param: json */
};

<Navigator 
    /* 根路由 */
    initialRoute={rootRoute}

    /* 场景跳转配置 */
    configureScene={(route) => {
        return Navigator.SceneConfigs.PushFromRight;
    }}

    /* 场景渲染 */
    renderScene={(route, navigator) =>{
        var Component = route.component;
        return (
            <Component 
                navigator={navigator}
                title={route.title}
                //传参 可以在这里设置属性 通过route.title
            />
        );
    }}
    style={{flex: 1}}
/>

• navigator 跳转

    /* push的页面 */
    var nextRoute = {
        component: MessageComponent,//新页面
        title: str,
    };

    this.props.navigator.push(nextRoute);
    //this.props.navigator.pop();

---

个人笔记