反应导航状态重置

时间:2021-04-15 01:48:17

标签: reactjs react-navigation react-navigation-v5 react-navigation-stack react-native-web

当我在网络上刷新页面时,导航状态丢失,因此我无法返回。我想要发生的是如果我刷新页面,导航状态不会丢失。我尝试做的是按照文档将状态持久化到本地存储:

useEffect(() => {
    /**
     * Get and sets the persisted navigation state so
     *  the user is immediately returned to the same location after the app is restarted.
     */
    const restoreState = async (): Promise<void> => {
      try {
        const initialUrl = await Linking.getInitialURL();

        if (initialUrl == null) {
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);

          const state = savedStateString
            ? JSON.parse(savedStateString)
            : undefined;

          if (state !== undefined) {
            setInitialState(state);
          }
        }
      } finally {
        setIsReady(true);
      }
    };
    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

这是我的容器的样子:

        <NavigationContainer
          linking={linking}
          theme={true ? navigationTheme.light : navigationTheme.dark}
          initialState={initialState}
          onStateChange={(state) => state && handleNavigationChange(state)}
          ref={navigation}>
  const handleNavigationChange = async (state: NavigationState): Promise<void> => {
    await AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state));
  };

0 个答案:

没有答案