如何将道具从flatlist项目传递到模态

Question

我已经实现了一个包含flatlist的视图组件，该列表呈现可触摸光明。我也实现了模态组件，我想在各个地方导入，包括呈现flatlist的组件。

我已经设法从外部打开模态（通过交出可见性的道具，通过NextProps访问它，并设置"模态"模式化"）并从内部关闭（只需通过更改其状态价值"更改状态值"模态"）。

但是：我还想将数据传递给每个flatlist项目的模式。呈现为接触式高光的项目应打开模态ONPRESS，并且模态应包含项目中的数据（在下面的代码中，这将是项目ID）。如何将数据传递到模态？我以某种方式无法使用NextProps来工作。这似乎是与从扁平列表中而不是模式下的设置状态有关的问题。

。

模态：

export default class ModalView extends React.Component {
constructor() {
  super();
  this.state = {
    modalVisible: false,
    id: null,
  };
}
componentWillReceiveProps(nextProps) {
  this.setState({
    modalVisible: nextProps.modalVisible,
    id: nextProps.id,
  })
}
render() {
  return (
     <Modal
      animationType="slide"
      transparent={ true }
      visible={ this.state.modalVisible }
      onRequestClose={() => { this.props.setModalVisible(false) }}
     > 
       <View>
         <View>
          <Text>{ this.state.id }</Text>
          <TouchableHighlight
            onPress={() => { this.props.setModalVisible(false) }}
          > 
            <Text>Hide Modal</Text>
          </TouchableHighlight>
         </View>
       </View>
     </Modal>
  )
}
}

flatlist渲染触摸光灯：

export default class RecentList extends React.Component {
constructor() {
  super();
  this.state = {
    modalVisible: false,
    id: null,
  }
}
_onPressItem(id) {
  this.setState({
    modalVisible: true,
    id: id,
  });
};
_renderItem = ({item}) => {
  return (
    <TouchableHighlight
      id={item.id}
      onPress={this._onPressItem}
    >
      <View>
        <Text>{id}</Text>
      </View>
    </TouchableHighlight>
  )
};
render() {
  let data = realm.objects('Example').filtered('completed = true')
             .sorted('startedAt', true).slice(0, 10)
  return (
    <View>
      <ModalView
        modalVisible={ this.state.modalVisible }
        setModalVisible={ (vis) => { this.setModalVisible(vis) }}
        id={ this.state.id }
      />
      <FlatList
        data={data}
        renderItem={this._renderItem}
        keyExtractor={(item, index) => index}
      />
    </View>
  )
}
}

Answer 1

您错过的一个小错误...

_renderItem = ({item}) => {
  return (
    <TouchableHighlight
      id={item.id}
      onPress={() => this._onPressItem(item.id)} // Your not sending the item.id
    >
      <View>
        <Text>{id}</Text>
      </View>
    </TouchableHighlight>
  )
};