使用 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; 

一个版本的示例实现>= 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} />;

Answer 2

只需以与示例中相同的方式实现它。就我而言，我忘记将 react-navigation 更新到 ^3.11.0 版本，也忘记导入 AsyncStorage。不知何故，本机并没有抱怨 AsyncStorage 不在那里。这就是状态持久性似乎不起作用的原因。

import {

  AsyncStorage

} from "react-native";

const AppNavigator = createStackNavigator({...});

const AppContainer = createAppContainer(AppNavigator);

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 = () => <AppContainer persistNavigationState={persistNavigationState} loadNavigationState={loadNavigationState}  renderLoadingExperimental={() => <ActivityIndicator />}/>;

Answer 3

如果您使用的createAppContainer是 react navigation 4，这里是对我有用的解决方案。

const App: () => React$Node = () => {

    const persistenceKey = "persistenceKey"

    const persistNavigationState = async (navState) => {

        try {

            await AsyncStorage.setItem(persistenceKey, JSON.stringify(navState))

        } catch(err) {

            // handle error

        }

    }

    const loadNavigationState = async () => {

        const jsonString = await AsyncStorage.getItem(persistenceKey)

        return JSON.parse(jsonString)

    }

    return(

        <View style={{flex: 1, backgroundColor: '#000000'}}>

            <AppContainer

                persistNavigationState={persistNavigationState}

                loadNavigationState={loadNavigationState}

            />

        </View>

    );

};