如何使用 react-native-camera 拍摄的图像

Question

我可以获得 react-native-camera 模块来访问相机并保存图像。但是，我不知道如何向用户显示此图像。

我在尝试什么：

我来拍照。这会在 assets-library://....

中生成一个看起来像 .jpg 的文件

    _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，然后进行渲染？

Answer 1

解决方案是启用 save to disk option 与保存到相机胶卷选项：

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

Answer 2

所以，我使用@YPCrumble 的回答有一段时间了。

但现在我必须将图像保存在我的相机胶卷中。

如果有人想继续保存在相机胶卷中，您必须手动 link RTCCameraRoll 库。

此处 link 库的文档：

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

如何使用 react-native-camera 拍摄的图像

How do I use a captured image with react-native-camera

reactjs

react-native

react-native-camera