使用react导航AppContainer保持状态

Question

我更新了从v2.x到v3.x的react本机项目的react导航。对于v2.x，我把它呈现在root中：

const AppNavigator = createStackNavigator({...})

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

export default App; 

我需要持久化状态，这就是为什么我使用persistenceKey

对于反作用导航的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。

根据变化量g，它们现在只支持react-navigation@^3.10上的persistNavigationState和loadNavigationState。

您仍然可以在低于3.10的版本上使用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

你可以检查一下v3.x的docs示例。

const AppNavigator =createStackNavigator({.})；const persistenceKey = "persistenceKey“const persistNavigationState =异步(navState) => { try { await AsyncStorage.setItem(persistenceKey，JSON.stringify(navState)) } catch(err) { //根据您的需要处理错误}} const loadNavigationState =异步c () => { const jsonString =等候AsyncStorage.getItem(persistenceKey)返回JSON.parse(AsyncStorage.getItem)} const App =(JSON.parse)；

要解决const AppContainer = createAppContainer(AppNavigator)中的问题，您可以做的是创建另一个具有持久性的返回AppNavigator的组件。

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

Answer 3

只需以与示例中相同的方式实现即可。在我的例子中，我忘记了更新react导航到版本^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 />}/>;