React Native - 处理onPress事件以在使用时间轴ListView按下特定ListView时显示图像

Question

我在Timeline Listview

处理onpress时遇到问题

我有这样的代码：

class Medicine extends Component {
  constructor(){
    super()
    this.onEventPress = this.onEventPress.bind(this)
    this.renderSelected = this.renderSelected.bind(this)
    this.renderDetail = this.renderDetail.bind(this)
    this.state = {selected: '', visible:false}
  }

  onEventPress(data){
    this.setState({selected: data, visible:true})
  }

  renderSelected(){
    console.log(this.state.selected.url)
    if(this.state.selected){
      return <ImageViewer imageUrls={this.state.selected.url}/>
    } else{
      console.log('asdasd')
    }
  }

  renderImage(){
    console.log(this.state.selected)
    return <Image style={{width:DeviceWidth*0.3, height:DeviceWidth*0.3}} source={{uri: this.state.selected.url}}/>
  }

  renderDetail(rowData, sectionID, rowID){
    let title = <Text style={[global.global.SubHeaderText, {color:'green'}]}>{rowData.time}</Text>
    var desc = (
      <View>
        <View style={{flexDirection:'row'}}>
          <Text style={[global.global.TextBold, {width:DeviceWidth*0.17}]}>Radiology </Text>
          <Text style={[global.global.Text, {flexWrap:'wrap', width:DeviceWidth*0.7}]}>{rowData.cat}</Text>
        </View>
        <View style={{flexDirection:'row'}}>
          <Text style={[global.global.TextBold, {width:DeviceWidth*0.17}]}>Description </Text>      
          <Text style={[global.global.Text, {flexWrap:'wrap', width:DeviceWidth*0.7}]}>{rowData.description == null ? '-' : rowData.description}</Text>      
        </View>
        {this.renderImage()}
      </View>
    )
    return (
      <View style={{flex:1}}>
        {title}
        {desc}
      </View>
    )
  }

  render() {
    return (
      <View style={{flex:1}}>
        <Timeline 
          style={{flex: 1, marginTop:20}}
          showTime={false}
          separator={true}
          renderFullLine={true}
          circleColor={'green'}
          lineColor={'green'}
          data={this.data}
          onEventPress={this.onEventPress}
          renderDetail={this.renderDetail}
        />
      </View>
    );
  }
}

以及结果：

每次我按下列表中的一个对象，每个列表上显示的图像都是相同的图像我按下，有一种方法可以避免它，只是在特定列表上显示图像，I＆＃39 ;我尝试使用rowID中的renderDetail()，但我还不足以解决问题

我的目标：当我按下第一个listView时，图像应显示在第一个ListView上，如果我按下第二个ListView，第一个ListView上的图像应该消失，第二个ListView显示图像而没有另一个listView显示与我按下的图像相同，

有一种方法可以归档我的目标吗？

Answer 1

我不确定data的结构，但我的猜测是URL是每个列表项的属性。 renderImage函数仅考虑存储在state中的所选对象，但是从renderDetail函数为每个列表项调用它。当renderDetail呈现特定列表项时，renderImage仅关注所选项目，但忽略当前列表项。

您可以将当前rowData传递给renderImage并有条件地显示图像。请考虑以下代码段

...
renderImage(rowData) {
 if (this.state.selected.url === rowData.url) {
  return <Image 
    style={{width:DeviceWidth*0.3, height:DeviceWidth*0.3}} 
    source={{uri: rowData.url}}
  />
 }
 return null;
}
...
renderDetail(rowData, sectionID, rowID) {
  ...
  var desc = (
    <View>
      ...
      {this.renderImage(rowData)}
      ...
    </View>
  return (
    <View style={{flex:1}}>
     {title}
     {desc}
    </View>
  );
}

希望这会有所帮助。