我不確定是否要濫用SwitchNavigator或只是缺少一些東西

Question

我從未使用過它，但是在查看文檔后，我發現可以創建一個包含以下內容的flow.js（以我的情況AuthLoadingScreen.js ： AuthLoadingScreen.js ）：

class ExistingItemsLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const addItems = await AsyncStorage.getItem('addItems');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(addItems ? 'Items' : 'HasItems');//App & Auth
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

export { ExistingItemsLoadingScreen }

這與我的Items.js文件綁定在一起， Items.js文件是底部的常規組件文件：

const AddItems = createStackNavigator({
    Items: { screen: Items },
    ItemsCreation: { screen: ItemsCreation },
    WaitButWhy: {screen: ExplanationScreen},
    Logout: {
      screen: AuthLoadingScreen,
    },
  },
  {
    initialRouteName: 'Items',
   }
);

我的意圖是，您可能會走同樣的路線，要么加載了Items.js ，要么加載了HasItems.js但是，我不知道該傳遞到什么地方，我需要傳遞什么。

當前，如果我強迫HasItems.js通過按下一個調用以下按鈕來創建值：

addNewItem = async() => {
      await AsyncStorage.setItem('addItems', 'true');
      this.props.navigation.navigate('Items', {hasItems: false});
    };

然后我看到了addItems屏幕，但是在那之后，我無法回到HasItems，也不知道為什么。

我認為也許我需要刪除addItems項目？ 我想銷毀它，但不確定是否有幫助...

Answer 1

我這樣做的方法是在啟動時有一個單獨的屏幕來處理導航邏輯。

因此，我將始終將應用程序默認設置為startup屏幕。 在啟動屏幕上決定要導航到的位置時，該啟動屏幕上將帶有某種動畫加載器。

導航的邏輯可以在您的componentDidMount或useEffect(() => {}, [])中完成。

您可以在Switch導航器示例中查看所有路線：

`
    const AddItems = createSwitchNavigator({
            StartupScreen: { screen: startup },
            HomeStack: { screen: home },
            LoginStack: { screen: login }, 
        },
        {
            initialRouteName: 'StartupScreen',
        }
    );
`