Сохранять состояние с помощью реакционно-навигационного AppContainer

Question

Я обновил реагирующую навигацию для реактивного проекта с v2.x до v3.x Для v2.x это было отрисовано в корне:

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;

Как мне сохранить состояние таким образом?

Спасибо

EDIT:

Я пробовал это:

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 , они только теперь поддерживают persistNavigationState и loadNavigationState при react-navigation@^3.10.

Вы все еще можете использовать persistenceKey в версиях ниже, чем 3.10.

Answer 2

Просто реализуйте это так же, как в примере. В моем случае я забыл обновить свою реакцию навигации до версии ^ 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 3

Вы можете проверить пример документов для 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)