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

Posted 2023-02-23

【中文标题】使用列表视图项单击反应本机模式

【英文标题】：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，因为我希望视图以模态方式显示。

【参考方案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>
  );