React Native: maneje el evento onPress para mostrar la imagen mientras

React Native: maneje el evento onPress para mostrar la imagen mientras se presiona ListView específico usando Timeline ListView

Tengo un problema para manejar onpress en Timeline Listview

Tengo un código como este:

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

y aquí está el resultado:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Cada vez que presiono un objeto de la lista, la imagen se muestra en cada lista con la misma imagen que presioné. Hay una manera de evitarlo y mostrar la imagen en una vista de lista específica. Intenté usar rowID de renderDetail() pero no soy lo suficientemente bueno para resolver el problema

Mi objetivo: cuando presioné el primer ListView, la imagen debería mostrarse en el primer ListView, y si presiono el segundo ListView, la imagen en el primer ListView debería desaparecer y el segundo ListView debería mostrar la imagen sin otro ListView que muestre la misma imagen como he presionado,

¿Hay alguna forma de archivar mi objetivo?

Mostrar la mejor respuesta

alguien tiene una idea por favor

No estoy seguro de la estructura de su data, pero creo que URL es una propiedad de cada elemento de la lista. La función renderImage solo considera el objeto seleccionado que está almacenado en state, pero se llama desde la función renderDetail para cada elemento de la lista. Mientras renderDetail presenta un elemento de lista en particular, renderImage se enfoca solo en el elemento seleccionado pero ignora el elemento de lista actual.

Puede pasar el rowData actual a renderImage y mostrar la imagen de forma condicional. Considere el siguiente fragmento

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

Espero que esto ayude.

claro, su fragmento se ve bien, y ahora el onPress puede manejarse con su código, gracias por la ayuda señor,