Как перемещаться между вложенными экранами и не возвращаться в React Navigation? - PullRequest
0 голосов
/ 30 августа 2018

Моя желаемая структура приложения состоит в том, что сначала будет SplashScreen, который затем переходит к LandingScreen. Оттуда пользователь либо регистрируется, либо входит в систему, затем он переходит к HomeScreen. Оттуда он может перейти на многие другие экраны и вернуться домой.

Когда пользователь находится в LandingScreen, он не сможет вернуться к SplashScreen. Когда пользователь находится в HomeScreen, он не сможет вернуться к LandingScreen или к любому экрану в auth.

  • Правильна ли моя схема навигатора для этого типа приложения?
  • Как мне перейти от LoginScreen к HomeScreen?
  • Как запретить пользователю возвращаться, как описано выше? Я пытался navigation.replace для этого.

Это мой навигатор:

const MainNavigator = createStackNavigator({
  splash: { screen: SplashScreen },
  auth: {
    screen: createStackNavigator({
      landing: { screen: LandingScreen },
      login: { screen: LoginScreen },
      register: { screen: RegisterScreen }
    })
  },
  main: {
    screen: createStackNavigator({
      home: { screen: HomeScreen },
      details: { screen: DetailsScreen },
      video: { screen: VideoScreen },
      search: { screen: SearchScreen }
    })
  }
},
{
  headerMode: 'none',
  initialRouteName: 'splash',
  cardStyle: { backgroundColor: '#FFFFFF' },
});

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Функция через экран (в зависимости от того, на какой экран вы хотите перейти, укажите имя_сервера):

function_name = () => {
 this.props.navigation.navigate("navigate_screen_name");
 };

Вызов функции:

<onPress={this.function_name} />

Функция через свою историю (она переходит к предыдущему экрану):

func_name = () => {
 this.props.navigation.pop();
};

Вызов функции:

<onPress={this.func_name} />
0 голосов
/ 30 августа 2018

Используйте два стека-навигатора с переключателем-навигатором

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
const Auth = createStackNavigator(landing: { screen: LandingScreen },
                                  login: { screen: LoginScreen },
                                  register: { screen: RegisterScreen });
const main = createStackNavigator(home: { screen: HomeScreen },
                                  details: { screen: DetailsScreen },
                                  video: { screen: VideoScreen },
                                  search: { screen: SearchScreen });

export default createSwitchNavigator(
    {
    splash: SplashScreen,
    Auth,
    main,
    },
{
initialRouteName: 'splash',
}
);

Цель SwitchNavigator - показывать только один экран за раз. По умолчанию он не обрабатывает обратные действия и сбрасывает маршруты до их состояния по умолчанию при переключении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...