使用 react-navigation AppContainer 保持状态

Question

我将 react-native 项目的 react-navigation 从 v2.x 更新到 v3.x。对于 v2.x，我在 root 处渲染了这个：

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;

但我收到此错误：

Cannot read property 'getStateForAction' of undefined

Answer 1

您可能需要更新react-navigation到>= 3.10.0.每react-navigation更新日志，他们只现在只支持persistNavigationState及loadNavigationState对react-navigation@^3.10。您仍然可以persistenceKey在低于3.10.- -编辑 - -一个版本的例子<3.10.0：const AppNavigator = createStackNavigator({...})const App = () => <AppNavigator persistenceKey={"NavigationState"} />;export default App;&nbsp;一个版本的示例实现>= 3.10.0：const AppNavigator = createStackNavigator({...});const persistenceKey = "persistenceKey"const persistNavigationState = async (navState) => {&nbsp; try {&nbsp; &nbsp; await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))&nbsp; } catch(err) {&nbsp; &nbsp; // handle the error according to your needs&nbsp; }}const loadNavigationState = async () => {&nbsp; const jsonString = await AsyncStorage.getItem(persistenceKey)&nbsp; return JSON.parse(jsonString)}const App = () => <AppNavigator persistNavigationState={persistNavigationState} loadNavigationState={loadNavigationState} />;

Answer 2

只需以与示例中相同的方式实现它。就我而言，我忘记将 react-navigation 更新到 ^3.11.0 版本，也忘记导入 AsyncStorage。不知何故，本机并没有抱怨 AsyncStorage 不在那里。这就是状态持久性似乎不起作用的原因。import {&nbsp; AsyncStorage} from "react-native";const AppNavigator = createStackNavigator({...});const AppContainer = createAppContainer(AppNavigator);const persistenceKey = "persistenceKey"const persistNavigationState = async (navState) => {&nbsp; try {&nbsp; &nbsp; await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))&nbsp; } catch(err) {&nbsp; &nbsp; // handle the error according to your needs&nbsp; }}const loadNavigationState = async () => {&nbsp; const jsonString = await AsyncStorage.getItem(persistenceKey)&nbsp; return JSON.parse(jsonString)}const App = () => <AppContainer persistNavigationState={persistNavigationState} loadNavigationState={loadNavigationState}&nbsp; renderLoadingExperimental={() => <ActivityIndicator />}/>;

Answer 3

如果您使用的createAppContainer是 react navigation 4，这里是对我有用的解决方案。const App: () => React$Node = () => {&nbsp; &nbsp; const persistenceKey = "persistenceKey"&nbsp; &nbsp; const persistNavigationState = async (navState) => {&nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))&nbsp; &nbsp; &nbsp; &nbsp; } catch(err) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // handle error&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; const loadNavigationState = async () => {&nbsp; &nbsp; &nbsp; &nbsp; const jsonString = await AsyncStorage.getItem(persistenceKey)&nbsp; &nbsp; &nbsp; &nbsp; return JSON.parse(jsonString)&nbsp; &nbsp; }&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <View style={{flex: 1, backgroundColor: '#000000'}}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AppContainer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; persistNavigationState={persistNavigationState}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadNavigationState={loadNavigationState}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );};