Question

我将反应本地项目的反应导航从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

您可以检查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)

Answer 2

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

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

对于低于persistenceKey的版本，您仍然可以使用3.10。

Answer 3

只需按照示例中的方法实施即可。在我的情况下，我忘记将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 4

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

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

Answer 5

如果您将createAppContainer用于反应导航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>
    );
};

通过反应导航AppContainer保持状态

5 个答案: