React Native Make State Change 来自不同的组件

Question

我正在使用 React Native，我遇到了使用 React Navigation v2 堆栈导航器导航到新组件的情况。然后用户按下一个选项并返回到他们所在的原始屏幕并显示更新的信息。

我的问题是如何更改前一屏幕的状态以显示用户选择的信息？

ShowFruitPage.js

此页面显示用户挑选的水果列表。

export default class ShowFruitPage extends Component{

  constructor(){
    super();

    this.state = {
      List: [{Fruit: apple}]
    }
  }

  render(){
    return(
      <View style={styles.ViewStyle}>
        <FlatList
          data={this.state.List}
          renderItem={({item}) =>

              <TouchableNativeFeedback
                background={TouchableNativeFeedback.Ripple('grey')}
                onPress={() => this.props.navigation.navigate('AddFruit',
                {
                  List: this.state.List
                })}

                <View style={styles.ListView}>
                  <Text>{item.Fruit}</Text>
                </View>

              </TouchableNativeFeedback>

          }
        />
      </View>
    )
  }
}

AddFruit.js

此页面显示了用户可以挑选的可用水果列表。当用户从此列表中选择时，我想更新 ShowFruitPage 上的列表。

export default class AddFruit extends Component{
  constructor(){
    super();

    this.state = {
      FruitList: [{Fruit:orange}, {Fruit: pear}]
    }

    this.pickFruit = this.pickFruit.bind(this);
  }

  pickFruit(Fruit){
    //Add the picked fruit to the ShowFruitPage state List

    //Then Navigate back to ShowFruitPage
    this.props.navigation.navigate('ShowFruitPage')
  }

  render(){
    return(
      <View style={styles.ViewStyle}>
        <FlatList
          data={this.state.FruitList}
          renderItem={({item}) =>

          <TouchableNativeFeedback
            background={TouchableNativeFeedback.Ripple('grey')}
            onPress={() => this.pickFruit(item)}
            <View style={styles.ListView}>
              <Text>{item.Fruit}</Text>
            </View>

          </TouchableNativeFeedback>

          }
        />
      </View>
    )
  }

}

Answer 1

正如您在 ShowFruitPage.js 中使用 List 所做的那样，您可以使用某种状态返回，即

this.props.navigation.navigate('ShowFruitPage', { Fruit });

当您导航回 ShowFruitPage.

时，{ Fruit } 在 navigation.state.params 上可用

另一种可能性（我认为）是在您导航到 AddFruit 时提供一个回调，它可以在 ShowFruitPage 上设置数据，允许你然后只需调用 navigation.goBack():

setFruit = fruit => {
  this.setState({ FruitList: [...this.state.FruitList, fruit] });
}

this.props.navigation.navigate('AddFruit', { setFruit: this.setFruit });

然后：

pickFruit(Fruit){
  const { navigation } = this.props;

  navigation.state.params.setFruit(Fruit);
  navigation.goBack();
}

另一种更重的解决方案是实施一些状态管理，例如 redux，以便数据独立于各个页面组件。

React Native Make State Change 来自不同的组件

React Native Make State Change From different component

state

reactjs

react-native

react-navigation

react-props