使用列表视图项单击反应本机模式答案

【问题标题】：React native modal with list view item click使用列表视图项单击反应本机模式
【发布时间】：2016-09-27 11:48:59
【问题描述】：

我想在单击列表项时以模态方式弹出一个视图。并且一直在使用此代码，如果我不滚动列表视图，它可以正常工作，如果我滚动则根本不起作用。

renderGymData(rowData){
return(
 <View>
         <Modal
             animationType={'none'}
             transparent={false}
             visible={!!this.state.selectedRow}>
             ....
         </Modal>

       <TouchableHighlight  onPress={() => this.showGymDetail(rowData)} >
         ....
       </TouchableHighlight>
      </View>);
}
and the render method of my list view is

render() {

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderGymData.bind(this)}
        style={styles.listView}>
      </ListView>
    );

}

我不想使用 navigator.push，因为我希望视图以模态方式显示。

【问题讨论】：

标签： ios react-native modalviewcontroller

【解决方案1】：

仅使用 Modal，并将其呈现在 ListView 下方，而不是 renderRow 内部，并在单击列表项时将行数据传递给 Modal。

render() {
  return (
    <View>
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderGymData.bind(this)}
        style={styles.listView}>
      </ListView>
      <Modal
           animationType={'none'}
           transparent={false}
           visible={!!this.state.selectedRow}>
           ....
       </Modal>
    </View>
  );
}

【讨论】：