Как загрузить тот же самый последний класс компонента в реагировать родной, используя реагирующую навигацию?

Question

Сценарий моего приложения похож, скажем, у вас есть три компонента:

class ComponentOne extends Component {
  render() {
    return (
      <View>
        <Text>Component One</Text>
        <Button
        title='Go To Component Two' 
        onPress={() => this.props.navigation.navigate('two')}/>
      </View>
    );
  }
}

class ComponentTwo extends Component {
  render() {
    return (
      <View>
        <Text>Component Two</Text>
        <Button
        title='Go To Component Three' 
        onPress={() => this.props.navigation.navigate('three')}/>
      </View>
    );
  }
}

class ComponentThree extends Component {
  render() {
    return (
      <View>
        <Text>Component Three</Text>
        <Button
        title='Go To Component One'
        onPress={() => this.props.navigation.navigate('one')}/>
      </View>
    );
  }
}

export default createStackNavigator({one: ComponentOne,two: ComponentTwo,three: ComponentThree});

Теперь, когда я загружаю приложение, будет загружено ComponentOne, внутри ComponentOne, когда я нажимаю на кнопку Go To Component Two, оно перейдет к ComponentTwo, внутри ComponentTwo, когда я нажму на кнопка Go To Component Three переместит меня на ComponentThree и так далее. Теперь допустим, что я нахожусь в ComponentTwo, и в то же время я закрываю приложение в телефоне, открываю переключатель приложений, очищаю все запущенные приложения и снова загружаю то же приложение, поэтому оно будет снова загружено с * 1012. *.

У меня вопрос, как запрограммировать react navigation для продолжения с того же компонента, с которого я ушел в прошлый раз, даже после очистки приложения от фона (очистки всех приложений в переключателе приложений)?

Есть ли в react navigation какой-нибудь встроенный способ сделать это? Кто-нибудь может сказать? Примеры будут более ценными. Спасибо!

Answer 1

Все навигаторы имеют onNavigationStateChange, где вы можете обрабатывать изменения состояния навигации. Пример кода:

import React from 'react';
import { AsyncStorage } from 'react-native';
import { createStackNavigator, NavigationActions } from 'react-navigation';

const Navigator = createStackNavigator({
  ComponentOne: {
    screen: ComponentOne,
  },
  ComponentTwo: {
    screen: ComponentTwo,
  },
  ComponentThree: {
    screen: ComponentThree,
  },
}, {
  initialRouteName: 'ComponentOne',
});

class App extends Component {
  constructor(props) {
    this.navigator = React.createRef();
  }

  componentDidMount() {
    try {
      // Retrieve the last route
      const value = AsyncStorage.getItem('lastNavigationRoute').then((result) => {
        if (result) {
          this.navigator.current.dispatch(NavigationActions.navigate({
            routeName: result,
          }));
        }
      });
    } catch (e) {
      // handle the error
    }
  }

  handleStateChange = (previousState, nextState) => {
    // Here we get the Navigate action type only
    const navigateAction = NavigationActions.navigate({ routeName: 'dummyRoute' });

    if (action.type === navigateAction.type) {
      try {
        // Saving the last route
        AsyncStorage.setItem('lastNavigationRoute', nextState.routeName);
      } catch (e) {
        // handle the error
      }
    }
  }

  render() {
    // You could also set a state with loader to handle loading from AsyncStorage
    return (
      <Navigator onNavigationStateChange={this.handleStateChange} ref={this.navigator} />
    );
  }
}

Как это работает:

• При каждом изменении состояния навигации вы также сохраняете последние routeName от Navigate действие
• Когда компонент монтируется, вы проверяете сохраненные маршрут в AsyncStorage
• Если есть маршрут, вы отправляете действие навигации (возможно также реализовать действие замены)

Надеюсь, это поможет.

Answer 2

Не думаю, что есть решение, использующее реагирующую навигацию. Я думаю, что вы могли бы сделать, это сохранить значение текущего экрана в памяти телефона, а затем использовать это значение при запуске приложения, чтобы определить, какой экран отображать