李白也的博客

编程,我并不专业。

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();

个人笔记

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_17235727/article/details/53995070
个人分类: 我的小说
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

React-Native之Navigator

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭