2015-10-15 10 views
18

react-native-cameraモジュールを使用してカメラにアクセスし、画像を保存できます。しかし、私はこのイメージをユーザーに表示する方法を理解できません。リアクションネイティブカメラでキャプチャした画像を使用するには

私が試していること:

ここで私は写真を撮ります。

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

方法:私はこのエラーを取得する

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

:これは私が画像をレンダリングしようとすると、しかし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'); 
     }); 
    } 

.jpgファイルになりそうだ何生成します写真を撮って、自分のアプリケーションの現在のstateに保存してレンダリングできますか?

答えて

26

ソリューションに、CameraRollオプションに保存対save to disk optionを有効にすることでした:

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

だから、私はいくつかの時間のために@YPCrumbleの回答を使用していました。

しかし、今ではカメラのロールに画像を保存する必要があります。

カメラロールで保存を継続したい場合は、RTCCameraRollライブラリを手動でリンクする必要があります。ここでは、ライブラリをリンクする

ドキュメント:

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

それはとても簡単です:

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

関連する問題