javascript - 使用 react-navigation AppContainer 保持状态

Question

我将 react-native 项目的 react-navigation 从 v2.x 更新到 v3.x。对于 v2.x，我在根目录下渲染了这个:

const AppNavigator = createStackNavigator({...})

const App = () => <AppNavigator persistenceKey={"NavigationState"} />;

export default App; 

我需要保持状态，这就是我使用 persistenceKey

的原因

对于 react-navigation 的 v3.x，需要一个应用程序容器，但我在弄清楚如何实现相同的状态持久性方面遇到了问题。

这是我的 v3.x 新代码

const AppNavigator = createStackNavigator({...})

const AppContainer = createAppContainer(AppNavigator)

const App = () => <AppContainer />;

export default App;

如何以这种方式持久化状态？

谢谢

编辑:

我已经试过了:

const AppNavigator = createStackNavigator({...})

const persistenceKey = "persistenceKey"
  const persistNavigationState = async (navState) => {
    try {
      await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))
    } catch(err) {
      // handle the error according to your needs
    }
  }
  const loadNavigationState = async () => {
    const jsonString = await AsyncStorage.getItem(persistenceKey)
    return JSON.parse(jsonString)
  }

const AppNavigationPersists = () => <AppNavigator
  persistNavigationState={persistNavigationState}
  loadNavigationState={loadNavigationState}
/>

const AppContainer = createAppContainer(AppNavigationPersists)

export default AppContainer;

但是我得到这个错误:

无法读取未定义的属性“getStateForAction”

Answer 1

您可能需要更新 react-navigation至 >= 3.10.0 .

根据 react-navigation changelog , 他们现在只支持 persistNavigationState和 loadNavigationState在 react-navigation@^3.10 .

您仍然可以使用 persistenceKey在低于 3.10 的版本上.

---编辑---

版本示例 <3.10.0 :

const AppNavigator = createStackNavigator({...})

const App = () => <AppNavigator persistenceKey={"NavigationState"} />;

export default App; 

一个版本的示例实现 >= 3.10.0 :

const AppNavigator = createStackNavigator({...});
const persistenceKey = "persistenceKey"
const persistNavigationState = async (navState) => {
  try {
    await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))
  } catch(err) {
    // handle the error according to your needs
  }
}
const loadNavigationState = async () => {
  const jsonString = await AsyncStorage.getItem(persistenceKey)
  return JSON.parse(jsonString)
}

const App = () => <AppNavigator persistNavigationState={persistNavigationState} loadNavigationState={loadNavigationState} />;