2015-10-15 34 views
18

Posso ottenere il modulo react-native-camera per accedere alla telecamera e salvare un'immagine. Tuttavia, non riesco a capire come visualizzare questa immagine all'utente.Come utilizzare un'immagine catturata con camera nativa react

Quello che sto cercando:

Qui ho scattare la foto. Questo genera quello che sembra essere un file .jpg in assets-library://....

_takePicture() { 
     var self = this; 
     this.refs.cam.capture(function(err, data) { 
      this.setState({photo: data}); 
      console.log(err, data); 
      // data is "assets-library://asset/asset.JPG?id=########-####-####-####-##########&ext=JPG" 
      console.log('just took a picture'); 
     }); 
    } 

Tuttavia, se provo a rendere l'immagine:

render: function() { 
     return(
     <Image style={styles.image} source={{uri: this.state.photo}}/> 
    ); 
    } 

ottengo questo errore:

No suitable image URL loader found for assets-library://asset/asset.JPG?id=.......

Come posso scattare una foto, salvarla nell'attuale state della mia applicazione e renderla?

risposta

26

La soluzione era quella di consentire la save to disk option contro l'opzione Salva CameraRoll a:

<Camera 
    captureTarget={Camera.constants.CaptureTarget.disk} 
    // Rest of Camera options here 
/> 
0

Così, stavo usando la risposta @YPCrumble per qualche tempo.

Ma ora devo salvare l'immagine nel mio rullino fotografico.

Se qualcuno desidera continuare a salvare nel rullino fotografico, è necessario collegare manualmente la libreria RTCCameraRoll.

Documentazione da libreria di collegamento qui:

https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking

È così semplice:

You can find the RCTImage.xcodeproj in your node_modules/react-native/Libraries/CameraRoll

Drag and drop this file inside Libraries folder in your XCode project.

After that, click in your main project, and find in the right pane "Build Phases".

Inside "Link Binary With Libraries", drag and drop the file called "libRCTCameraRoll.a" from left pane -> Libraries -> RTCCameraRoll.xcodeproj -> Products

Problemi correlati