React Native-在使用时间线ListView按下特定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>
    );
  }
}

结果如下：

每次我按下列表中的一个对象时，每个列表上显示的图像都与我按下的图像相同，有一种方法可以避免，只是在特定的listView上显示图像，我尝试使用renderDetail中的rowID，但我还不能很好地解决这个问题

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

---

有一种方法可以将我的目标存档给任何人吗？

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

可以将当前行数据传递给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>
  );
}

---

希望这会有所帮助。

任何人都有想法，请大家分享，您的代码片段看起来不错，现在onPress可以处理您的代码了，谢谢您的帮助，先生，