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

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

如果您使用帶有反應導航 4 的createAppContainer ，這里是對我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>
    );
};