Как управлять двумя переходами на одной странице: один создает навигатор стека, а второй - навигатор ящика?

Question

экспорт класса по умолчанию Приложение расширяет React.Component {render () {

return(
  <MyApp />
  );
 return(

  <Navigation />
  );

}

const Navigation = createStackNavigator({

Приветствие: {screen: Splash, navigationOptions: {header: null}}, Login: {screen: Requesterlogin, navigationOptions: {title: "Login", headerTitleStyle: {alignSelf: "center", textAlign: "center", ширина: "77%"}, headerStyle: {backgroundColor: "# 095473"}, headerTintColor: "white"}},

Forgot: {screen: Forgot, navigationOptions: {title: "Forgot Password", headerTitleStyle: {alignSelf: "center", textAlign: "center", width: "77% "}, headerStyle: {backgroundColor:" # 095473 "}, headerTintColor:" white "}}});

const MyApp = DrawerNavigator(

{Home: {screen: Reqlogin, navigationOptions: {boxLabel: 'Home', boxIcon: () => (

    />
    ),
    }
},
Profile: {
  screen: Profile_Requester,
  navigationOptions: {
    drawerLabel: 'Profile',
    drawerIcon: () => (
      <Icon
      name="user-circle"
      size={25}
      color="black"
      //style={styles.useraccounticon}

    />
    ),
    }
},

});

В приведенном выше коде я использую две навигационные навигации CreateStack, используемые для навигации.Ящик навигатор используется для Myapp.Но в моем случае работает только Myapp.Пожалуйста, дайте некоторую идею, как вернуть правильный путь, и оба будут работать.Спасибо.

Answer 1

Похоже, вы пытаетесь реализовать поток аутентификации.Вы должны сделать это, используя createSwitchNavigator и вложив в него другие навигаторы.SwitchNavigator может помочь вам с потоками аутентификации, потому что он обрабатывает такие вещи, как обеспечение того, что вы не можете перейти к своему основному приложению с экрана входа в систему с помощью кнопки «Назад».

Идея в том, что у вас будет SwitchNavigator в качестве родительского навигатора с двумя потоками: вошел пользователь в систему или нет.Дочерние навигаторы будут что-то вроде Auth и Main.Если пользователь не вошел в систему, активным навигатором будет Auth, что само по себе будет StackNavigator.Если пользователь выполнил вход, активным навигатором будет DrawerNavigator со сложенным StackNavigator.

import { createSwitchNavigator, createStackNavigator, createDrawerNavigator } from 'react-navigation';

const App = createDrawerNavigator({ AppStack: AppStack });
const AppStack = createStackNavigator({
  Home: { screen: Reqlogin },
  Profile: { screen: Profile_Requester }
});
const Auth = createStackNavigator({
  Welcome: { screen: Splash },
  Login: { screen: Requesterlogin },
  Forgot: { screen: Forgot }
});

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,  // You'll check whether user is logged in or not here
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

Для получения дополнительной помощи посетите эту документацию и эту статью.