web-dev-qa-db-ja.com

キャプチャした画像をreact-native-cameraで使用するにはどうすればよいですか

react-native-camera モジュールを取得して、カメラにアクセスし、画像を保存できます。しかし、この画像をユーザーに表示する方法がわかりません。

私が試していること：

ここで写真を撮ります。これにより、.jpgに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');
        }); 
    }

ただし、画像をレンダリングしようとすると、次のようになります。

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

このエラーが発生します：

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

写真を撮って、アプリケーションの現在のstateに保存し、レンダリングするにはどうすればよいですか？

reactjsreact-nativereact-native-camera
19
YPCrumble

解決策は、 ディスクに保存オプション とcameraRollに保存オプションを有効にすることでした。

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

それで、私はしばらくの間@YPCrumbleの答えを使用していました。

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

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

ここにライブラリをリンクするためのドキュメント：

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

それはとても簡単です：

RCTImage.xcodeprojは、node_modules/react-native/Libraries/CameraRollにあります。

このファイルをXCodeプロジェクトのLibrariesフォルダー内にドラッグアンドドロップします。

その後、メインプロジェクトをクリックし、右側のペインで[ビルドフェーズ]を見つけます。

「LinkBinaryWith Libraries」内で、「libRCTCameraRoll.a」というファイルを左ペインからドラッグアンドドロップ->ライブラリ-> RTCCameraRoll.xcodeproj-> Products

1
Luis Antonio Pestana