首頁猿問使用...

使用 react-navigation AppContainer 保持狀態

JavaScript

海綿寶寶撒 2021-06-30 09:42:32

我將 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

查看完整描述

3 回答

蠱毒傳說

TA貢獻1895條經驗獲得超3個贊

您可能需要更新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} />;

反對回復 2021-07-01

陪伴而非守候

TA貢獻1757條經驗獲得超8個贊

只需以與示例中相同的方式實現它。就我而言，我忘記將 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 />}/>;

反對回復 2021-07-01

隔江千里

TA貢獻1906條經驗獲得超10個贊

如果您使用的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(

<AppContainer

persistNavigationState={persistNavigationState}

loadNavigationState={loadNavigationState}

</View>

);

};

反對回復 2021-07-01

3 回答
0 關注
179 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 react-navigation AppContainer 保持狀態

使用 react-navigation AppContainer 保持狀態

3 回答

添加回答