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

就像使用List在 ShowFruitPage.js 中所做的一样，您可以导航到某些状态，即

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

当您导航回 ShowFruitPage 时，在{ Fruit }上提供navigation.state.params。

（我认为）另一种可能性是，当您导航到 AddFruit 时可以提供回调，该回调可以设置 ShowFruitPage 上的数据，从而让您可以仅调用{{1 }}：

navigation.goBack()

然后：

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

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

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

从不同组件反应本机进行状态更改

1 个答案: