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

Question

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

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