Как перейти на предыдущий экран с параметрами?

Question

Я нахожусь на экране A с текущим состоянием {key: 'value'}, я перешел на экран B

, сейчас я пытаюсь снова перейти с экрана B на экран A, но яне хочу терять текущее состояние на экране A {key: 'value'}

Некоторое решение состоит в том, чтобы сохранить данные в AsynStorage и извлечь их при возврате на экран A, но это не очень хорошоПрактика

.pop () делает это, но что, если мне нужно вернуться с дополнительными параметрами?

Navigation.pop(this.props.componentId , {
                               passProps: {
                                       data : 'current',
                                       more : 'just-example'
                                     }});

приведенный выше код, не сработало

любые предложения?

Я не использую какой-либо инструмент управления состоянием, такой как Redux / Mobx ..

Answer 1

Я работал над этим и добился с помощью react-navigation.

По сути, ваш компонент A отправит компоненту B состояние навигации компонента A. Итак, для Bс точки зрения, это будет prevState перед укладкой компонента B.

Поэтому, когда компонент B перемещается «назад» к компоненту A, используя предыдущее состояние навигации, это было так, как будто ваше состояние навигации никогда не менялось, и теперь вы можете использовать второйпараметр navigate для отправки параметров обратно компоненту A.

Этот простой пример иллюстрирует эту практику, и я думаю, что она полностью допустима и не используется AsyncStorage.

// In Component A use a custom prevState when goes to Component B
const { navigation } = this.props;

navigation.navigate('ComponentB', { prevState: navigation.state });

// In Component B use this custom goBack to "pop" to last screen
function goBack(data) {
  const { navigation } = this.props;

  const { routeName, key } = navigation.getParam('prevState');

  navigation.navigate({ routeName, key, params: data });
}

// And finally in Component A again you could get data like this
function getDataFromComponentB() {
  const { navigation } = this.props;

  // It is null if no parameters are specified!
  return navigation.state.params;
}

Answer 2

Как предложил Терранс.Вы можете использовать обратный вызов в подпорках и запустить его перед возвратом на предыдущую страницу.

источник ответа: Свойства React Native Pass для навигатора pop

Answer 3

Я нашел хорошее решение - отправить функцию обратного вызова с параметрами

на экране A

  getback(success)
  {
      alert(success);
  }

  Navigation.push(this.props.componentId , { component : {
         name : "Payment",
         passProps: {
         subscription : current,
         getback: this.getback
       },
   }});

, а затем на экране B, когда вы откроете экран A, активируйте функцию возврата

Navigation.pop(this.props.componentId);
this.props.getback(true);

это хорошо сработало со мной