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

但我收到此错误：

Cannot read property 'getStateForAction' of undefined

Answer 1

如果您使用带有反应导航 4 的 createAppContainer，这是对我有用的解决方案。

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>
    );
};

Answer 2

文档不清楚，但您实际上需要将道具persistNavigationState和loadNavigationState直接传递给AppContainer组件：

<AppContainer
  persistNavigationState={persistNavigationState}
  loadNavigationState={loadNavigationState}
/>

Answer 3

您可能需要将react-navigation 更新为>= 3.10.0。

根据react-navigation changelog，他们现在只支持react-navigation@^3.10 上的persistNavigationState 和loadNavigationState。

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

---编辑---

<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 4

只需按照与示例中相同的方式实现即可。在我的情况下，我忘记将 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 5

您可以查看docs example for v3.x。

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} />;

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

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