Question

我从没使用过它，但是看着the docs时，我发现可以创建一个包含以下内容的flow.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文件相关联，该文件是位于底部的常规组件文件：

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

我的意图是，您可能会走同样的路线，并且加载了Items.js或HasItems.js，但是，我不知道我需要传递什么位置来进行此切换。 / p>

当前，如果我强迫HasItems.js通过按下一个调用以下按钮来创建值：

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

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

我认为也许我需要删除addItems项目？我想销毁它，但不确定是否有帮助...

Answer 1

我这样做的方法是在启动时有一个单独的屏幕来处理导航逻辑。

因此，我将始终使该应用程序默认为startup屏幕。该启动屏幕将在决定导航到何处时，上面会带有某种动画加载器。

导航逻辑可以在您的componentDidMount或useEffect(() => {}, [])的startupScreen中完成。

但是您只能在Switch导航器示例中找到所有路线：

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

我不确定是否要滥用SwitchNavigator或只是缺少一些东西

1 个答案: