Question

我是Wix Navigation的新手，我真的很喜欢本机在导航中的感觉，但是它也非常困难。.我不明白我应该如何构建。我希望能够通过单个欢迎屏幕启动我的应用，然后我将导航用户以登录/注册屏幕。登录后，它们将位于主页内部，并且主页将具有sideMenu。我已经创建了带有侧菜单的主页，但是之前我无法显示欢迎屏幕，但还是有问题。

我真的尝试了很多组合，但是我做得不好，有人可以给我一个小例子我怎么做吗？这里实际上首先显示欢迎屏幕，但是它有后退按钮，我不想要..当我按下后退按钮时，它会进入主页，相反，我们应该能够从欢迎中进入主页

想要的流程：欢迎->登录->主页（带有侧面菜单）

Navigation.registerComponent(`WelcomeScreen`, () => Welcome);
    Navigation.registerComponent(`HomeScreen`, () => Home);
    Navigation.registerComponent(`Screen2`, () => Screen2);

    Navigation.events().registerAppLaunchedListener(() => {

        Navigation.setRoot({
            root: {
                sideMenu: {
                left: {
                    component: {
                        name: 'Screen2',
                        passProps: {
                            text: 'This is a left side menu screen'
                        },
                    },
                },
                center: {
                    stack: {
                        children:[
                            {
                                component: {
                                    name: 'HomeScreen',
                                    options:{
                                        topBar:{
                                            visible: true,
                                            title: {
                                                text: 'Home',
                                                color: 'red',
                                                alignment: 'center'
                                            },
                                        },
                                    }
                                },
                            },
                            {
                                component:{
                                    name: 'WelcomeScreen',
                                    options:{
                                        topBar:{
                                            visible: true,
                                            title: {
                                                text: 'Welcome',
                                                color: 'red',
                                                alignment: 'center'
                                            },
                                        },
                                    }
                                },
                            }
                        ]
                    }
                },
                right: {
                    component: {
                        name: 'Screen2',
                        passProps: {
                            text: 'This is a right side menu screen'
                        }
                    }
                },


                options: {
                    sideMenu: {
                        left: {
                            width: 250*SW,
                        },
                    },
                }
            },
        },

        })

    })

Answer 1

您可以首先将欢迎屏幕作为根，然后将登录屏幕推到顶部，如果用户已登录，则可以通过将上述代码放入setRoot来再次设置根。 Example

编辑

index.js：

Navigation.events ().registerAppLaunchedListener (() => {
Navigation.setRoot ({
root: {
  stack: {
    children: [
      {
        component: {
          id: 'WelcomeScreen', // Optional, Auto generated if empty
          name: 'navigation.playground.WelcomeScreen', // WelcomeScreen Id
          }
        },
      ],
    },
  },
 });
});

推送到HomeScreen.js

ScreenOne.js：

import {PropTypes} from 'prop-types';

static propTypes = {
  componentId: PropTypes.string,
};

pushScreen () {
   Navigation.push (this.props.componentId, {
     component: {
       name: 'navigation.playground.HomeScreen' // HomeScreen.js Id
    },
  });
}

尝试一下这种推屏逻辑是否适合您

React-Native Wix导航v2构建适当的流程

1 个答案: