Question

我正在使用其基本数据包（导航等）来开发一个React-native项目。我有两个屏幕。首先有一个按钮，当我单击按钮时。它导航到另一个具有平面列表的屏幕。然后，我单击Flatlist中的值，它给了我一个价值。我可以使用this.props.navigation.navigate将该值发送到第一个屏幕，并且可以在控制台中显示它，但是我不知道如何使用它来更改buttonText在我的第一个屏幕中？在第一个屏幕上应该在哪里使用setstate函数？（对不起英语）

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

如果您共享您的代码会更好，但这是我会做的。

第二个屏幕

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

第一屏

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

Answer 2

您可以将所选项目从“平面清单”传递到主屏幕，如下所示：

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')
}

如何使用导航参数设置状态？

2 个答案: