Проходная функция в качестве параметра в реагирующей навигации 5

Question

ПРИМЕЧАНИЕ: Этот запрос предназначен для реагирования-навигации 5.

В реагирующей навигации 4 мы можем передать функцию в качестве параметра во время навигации, но в реагирующей навигации 5 он выдает предупреждение о сериализации параметров.

По сути, я пытаюсь перейти на дочерний экран с родительского экрана, получить новое значение и обновить состояние родительского экрана.

Вот способ, которым я сейчас занимаюсь:

Родительский экран

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

<TouchableOpacity
    style={ styles.countrySelector }
    activeOpacity={ 0.7 }
    onPress={ () => Navigation.navigate("CountrySelect",
        {
             onSelect: this._onSelectCountry,
             countryCode: this.state.country_code,
        })
    }
>
.
.
.
</TouchableOpacity> 

Дочерний экран

_onPress = (country, country_code, calling_code) => {
    const { navigation, route } = this.props;
    navigation.goBack();
    route.params.onSelect({
        country_name: country,
        country_code: country_code,
        calling_code: calling_code
    });
};

Answer 1

Вместо передачи функции onSelect в параметрах, вы можете использовать navigate для передачи данных обратно на предыдущий экран:

// `CountrySelect` screen
_onPress = (country, country_code, calling_code) => {
  const { navigation, route } = this.props;
  navigation.navigate('NameOfThePreviousScreen', {
    selection: {
      country_name: country,
      country_code: country_code,
      calling_code: calling_code
    }
  });
};

Затем вы можете обработать это на первом экране (в componentDidUpdate или useEffect):

componentDidUpdate(prevProps) {
  if (prevProps.route.params?.selection !== this.props.route.params?.selection) {
    const result = this.props.route.params?.selection;

    this._onSelectCountry(result);
  }
}