Необходимо выполнить аутентификацию Flux с помощью реагирующего навигатора, но мне нужно авторизоваться только для некоторых экранов.

Question

expo: ^32.0.0
react: 16.5.0
react-navigation: ^3.11.0

Привет!Когда я запускаю свое приложение, мне нужно идти домой без авторизации.После этого у меня есть DrawerNavigator, который отправляет следующие экраны:

• Аккаунт (требуется авторизация)
• Магазины (требуется авторизация)

КОНТЕКСТ МОЕЙНАВИГАЦИЯ:

Я использую createDrawerNavigator в качестве основного Навигация для отправки:

Home (don't need auth) => call Home screen
Account (need auth) => call SwitchNavigator with Params
Shops (need auth) => call SwitchNavigator with Params

код:

  {
    Home: { screen: Home },
    Account: AppAccessSwitchNavigator('Account'),
    Shops: AppAccessSwitchNavigator('Shops')
  },
  {
    contentComponent: Menu,
    drawerBackgroundColor: 'transparent',
    drawerType: 'front'
  }
));

Когда я захожу в Учетную запись или Магазины SwitchNavigator вызывает экран AuthLoading какэтот документ https://reactnavigation.org/docs/en/authflow.html

И мой AuthLoading берет параметры из Drawer для отправки, если я авторизован на хорошем экране или в Auth Stack

const AppAccessSwitchNavigator = (route) => createSwitchNavigator(
  {
    AuthLoading: {
      screen: (props) => <Loading {...props} route={route} />,
    },
    // AuthLoading: Loading,
    Account: Account,
    EditAccount: EditAccount,
    Shops: Shops, 
    EditShop: EditShop,
    SignUp: SignUp,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
)

const AuthStack = createStackNavigator({ 
    SignIn: SignIn,
    SignUp: SignUp
});

---

Давайте попробуемвход в систему и выход из системы:

Это работает, если я не авторизован, я перехожу к экрану входа и возвращаюсь к исходному целевому экрану (магазины для примера), так что мой switchNavigator теперь подключен, отлично!

Теперь выход из системы всегда на экране моего магазина. Все в порядке. Я перенаправляю на экран входа в систему, НО, если я перехожу на экран учетной записи, я все еще вхожу в систему, потому что мой стек всегда монтируется, поэтому я не перешел на initalRoute (AuthLoading), чтобы проверить,Я авторизован или нет.Поэтому я должен выйти из системы также на экране своей учетной записи!

И проблема та же, что и в другом случае: теперь я выхожу на экране магазинов и на экране учетной записи.Если я вхожу в экран «Магазины», то я вхожу в экран «Магазины», но теперь, если я вхожу в экран «Учетная запись», я все еще на экране входа в систему.

---

Мой файл AuthLoading:

  constructor() {
    super();
    this._bootstrapAsync();
  }



  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');
    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? this.props.route : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    console.log("LOADING ")
    return (
      <>
        <NavigationEvents
          onWillFocus={() => this._bootstrapAsync() }
        />
        <View style={styles.container}>
          <ActivityIndicator />
          <StatusBar barStyle="default" />
        </View>
      </>
    );
  }
}

Мой файл роутера:

  SignIn: SignIn,
  SignUp: SignUp
});


const AppAccessSwitchNavigator = (route) => createSwitchNavigator(
  {
    AuthLoading: {
      screen: (props) => <Loading {...props} route={route} />,
    },
    // AuthLoading: Loading,
    Account: Account,
    EditAccount: EditAccount,
    Shops: Shops, 
    EditShop: EditShop,
    SignUp: SignUp,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
)


const NavigationRoot = createAppContainer(createDrawerNavigator(
  {
    Home: { screen: Home },
    Account: AppAccessSwitchNavigator('Account'),
    Shops: AppAccessSwitchNavigator('Shops')
  },
  {
    contentComponent: Menu,
    drawerBackgroundColor: 'transparent',
    drawerType: 'front'
  }
));