React-Native Wix Navigation v2 Создание правильного потока - PullRequest
Новая
       14

React-Native Wix Navigation v2 Создание правильного потока

0 голосов
/ 18 ноября 2018

Я очень новичок в 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,
                        },
                    },
                }
            },
        },

        })

    })

1 Ответ

0 голосов
/ 18 ноября 2018

Вы можете начать с установки экрана приветствия в качестве корневого и последующего нажатия на экран входа в систему, а также, если пользователь вошел в систему, снова установив корневой каталог, поместив приведенный выше код в setRoot. Пример * +1003 *

Редактировать

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
    },
  });
}

Попробуйте, работает ли эта логика экрана нажатия для вас

...