Как установить состояние с помощью параметров навигации?

Question

Я работаю над собственным проектом React с его базовыми c пакетами (навигация и т. Д. c). У меня есть два экрана. Сначала есть кнопка, и когда я нажимаю кнопку. Это перейти к другому экрану, который имеет плоский список. Затем я нажимаю значение в плоский список, это дает мне значение. Я могу отправить это значение на первый экран с помощью this.props.navigation.navigate и показать его в консоли, но я не знаю, как использовать его для изменения buttonText, который на моем первом экране? Где я должен использовать функцию setstate на первом экране? (простите за английский sh)

Home. js

    import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {InputWithButton} from '../components/TextInput';

//const TEMP_BASE_CURRENCY = 'USD';
//const TEMP_CONVERT_CURRENCY = 'GBP';

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      baseCurrency: 'TRY', //Başlangıç olarak sayfa açıldığında gelecek olan değerler
      convertCurrency: 'USD',

      amount: null,
      result: '',
      date: '',
    };
    //const selected = this.props.route.params;
  }

  calculate = () => {
    const amount = this.state.amount;

    let url =
      'https://api.exchangeratesapi.io/latest?base=' + this.state.baseCurrency;
    fetch(url, {
      method: 'GET',
    })
      .then((res) => res.json())
      .then((data) => {
        const date = data.date;
        const result = (
          data.rates[this.state.convertCurrency] * amount
        ).toFixed(2);

        this.setState({
          result,
          date,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  handleChangeText = (text) => {
    //Yazıda değişim algılandığında api işlemleri başlasın

    this.setState(
      {
        amount: text,
      },
      this.calculate,
    );
  };

  handlePressBaseCurrency = () => {
    //flatlist sayfası açılsın
    const {navigation} = this.props;
    navigation.navigate('CurrencyList');
  };

  handlePressConvertCurrency = () => {
    //flatlist sayfası açılsın
  };

  render() {
    const {baseCurrency, convertCurrency, amount, result, date} = this.state;
    return (
      <View>
        <InputWithButton
          buttonText={baseCurrency}
          onPress={this.handlePressBaseCurrency}
          keyboardType="numeric"
          onChangeText={(text) => this.handleChangeText(text)}
        />
        <InputWithButton
          editable={false}
          buttonText={convertCurrency}
          onPress={this.handlePressConvertCurrency}
          value={result}
        />
      </View>
    );
  }
}

export default Home;

CurrencyList. js

import React, {Component} from 'react';
import {View, FlatList, Text} from 'react-native';
import currencies from '../data/currencies';

import {ListItem, Separator} from '../components/List';
const temp_base_currency = 'CAD';

class CurrencyList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: '',
    };
  }

  handlePress = (item) => {
    this.setState({
      selectedItem: item, //__
    });
    // const {navigate} = this.props.navigation;
    // navigate('Home', {clickedItem: this.state.selectedItem});

    //Tıklandığında beklesin
    setTimeout(
      () => this.props.navigation.navigate('Home', {selected: item}),
      1,
    ); //__
  };

  render() {
    return (
      <View>
        <FlatList
          renderItem={({item}) => (
            <ListItem
              onPress={() => this.handlePress(item)}
              text={item}
              selected={item === this.state.selectedItem} //__
            />
          )}
          data={currencies}
          keyExtractor={(item) => item}
          ItemSeparatorComponent={Separator}
        />
      </View>
    );
  }
}

export default CurrencyList;

Answer 1

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

Home. js:

this.props.navigation.navigate('CurrencyList',
{
  onGoback: (item) => this.setState({})
})

CurrencyList. js:

handlePress: (item) => {
  /** your code **/
  this.props.navigation.state.params.onGoBack(item)
  this.props.navigation.navigate('Home')
}

Answer 2

Было бы лучше, если бы вы поделились своим кодом, но вот что я бы сделал.

ВТОРОЙ ЭКРАН

this.props.navigation.navigate('firstScreen', {
  name: 'Your value'
})

ПЕРВЫЙ ЭКРАН

const name = this.props.route.params.name;
<Button>{name}</Button