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

Question

我想在列表项处于 clicked.and 时以模态方式弹出一个视图。如果我不滚动列表视图，它可以正常工作，如果我滚动，则根本不起作用。

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 因为我希望视图以模态方式显示。

Answer 1

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

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>
  );
}

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

React native modal with list view item click

modalviewcontroller

ios

react-native