react native - images - Obtener la imagen recientemente hecha clic desde la cámara en la vista de la imagen en reaccionar-nativo

react native load image from file

Question

Estoy implementando la cámara en mi aplicación nativa de reacción. Quiero mostrar la imagen capturada recientemente de esa cámara en una pequeña vista de imagen en la misma pantalla después de hacer clic. Pero no entiendo cómo puedo acceder a la imagen en la que hace clic recientemente. Cada vez que se hace clic en una nueva imagen a través del teléfono, se le asigna un nombre aleatorio predeterminado, ¿cómo lo remito a la fuente de la vista de imagen? Por favor, sugiera alguna forma de hacerlo. Mi código es

 class Incident extends Component {
    constructor(props)
    {  super(props)

        this.state=  {path:"",show:false,video:Camera.constants.CaptureMode.video,camera:Camera.constants.CaptureMode.camera}    
      }
    render() {
      return (
              <View style={styles.container}>
             <View style={{flex:72}}>
             <Camera
              ref={(cam) => {
               this.camera = cam;
                }}
              style={styles.preview}
               aspect={Camera.constants.Aspect.fill}
              captureMode={this.state.camera}>

          </Camera>

  </View>
  <View style={{flex:8,opacity:0.5,backgroundColor:''black''}}>

    {()=>this.showClickedImage()}

  </View>


  <View style={{flex:10,flexDirection:''row'',justifyContent:''space-between'',backgroundColor:''#f3396b''}}>
  <TouchableOpacity style={{flex:33,flexDirection:''column'', alignItems: ''center'',paddingTop:10}}>
  <Image style={styles.icon} source={require(''./Images/menu.png'')}/>
  <Text>Home</Text>
  </TouchableOpacity>



  <TouchableOpacity style={{flex:34,flexDirection:''column'', height:70,alignItems: ''center'',borderColor:''#dd1e52'',borderWidth:1,paddingTop:5}} 
                               onPress={()=>this.takePicture()}>
  <Image style={{width:50,height:50}} source={require(''./Images/capture.png'')}/>

  </TouchableOpacity>





  <TouchableOpacity style={{flex:33,flexDirection:''column'', alignItems: ''center'',paddingTop:10}}>
  <Image style={styles.icon} source={require(''./Images/profile.png'')}/>
  <Text>Profile</Text>
  </TouchableOpacity>


  </View>
  </View>
);
      }

      showClickedImage()
  { 
        return <View style={{flex:1,height:40,width:40, borderWidth:1,borderColor:''black''}}>
               <Image style={{width:40,height:40}} source= {{uri: this.state.path}}/>
               </View>
               }

       takePicture() 
     {

       this.camera.capture()
  .then((data) =>{console.log(data.path),this.setState({show:true}),this.setState({path:data.path})})
  .catch(err => console.error(err));
             }
            }

Answer 1

camera.capture() devuelve la ruta de la imagen capturada. Úselo para mostrar en el componente Image .

<Image source={{uri: data.path}} style={{width: 100, height: 100}} />