Как отправить данные обратно в предыдущее окно при использовании navigation.goBack ()?

Question

У меня есть экран 1, с которого я перехожу на экран 2, используя:

navigation.navigate('Screen2')

На этом экране я хотел бы перейти к предыдущему, который прост:

navigation.goBack()

Однако мне интересно, как я могу передать некоторые данные обратно на Screen1?Нечто подобное не сработает navigation.goBack({ myData: 'something' }), поэтому мне интересно, каков рекомендуемый способ сделать это вообще?

Answer 1

Вы можете решить это двумя способами:

1: Используя метод навигации

Передать метод при вызове этого экрана через навигацию:

this.props.navigation.navigate('Screen2', {
  onGoBack: this.refresh,
});

refresh=(data)=> {

}

и, когда вы нажмете назад, передайте данные, как

this.props.navigation.state.params.onGoBack('123');
this.props.navigation.goBack();

2: Использование магазина с избыточностью

Если вы используете избыточность в своем приложении, простообновлять избыточное хранилище всякий раз, когда пользователь нажимает кнопку «Назад», и получать значение хранилища на предыдущем экране.

Answer 2

, если вы используете v2 или новее, другая возможность - использовать функцию navigate, обеспечивающую key / routeName маршрута, по которому вы идете обратно, и params.документы: https://reactnavigation.org/docs/en/navigation-actions.html#navigate

Answer 3

Вы можете передать обратный вызов (onSelect) следующим образом:

// SCREEN 1
import React from "react";
import { Button, Text, View } from "react-native";

class Screen1 extends React.Component {
  state = { selected: false };

  onSelect = data => {
    this.setState(data);
  };

  onPress = () => {
    this.props.navigate("Screen2", { onSelect: this.onSelect });
  };

  render() {
    return (
      <View>
        <Text>{this.state.selected ? "Selected" : "Not Selected"}</Text>
        <Button title="Next" onPress={this.onPress} />
      </View>
    );
  }
}

// SCREEN 2
import React from "react";
import { Button } from "react-native";

class Screen2 extends React.Component {
  goBack() {
    const { navigation } = this.props;
    navigation.goBack();
    navigation.state.params.onSelect({ selected: true });
  }

  render() {
    return <Button title="back" onPress={this.goBack} />;
  }
}