如何使用 react-native-camera 从相机胶卷 url 显示图像？答案

【问题标题】：How to display Image from camera roll url using react-native-camera?如何使用 react-native-camera 从相机胶卷 url 显示图像？
【发布时间】：2017-01-31 06:12:43
【问题描述】：

我使用 react-native-camera 来捕获图像并将它们保存在 iOS 设备的 cameraRoll (CaptureTarget) 中，在捕获时我得到以下形式的图像路径

"assets-library://asset/asset.JPG?id=8B55D3E5-11CE-439A-8FC6-D55EB1A88D7E&ext=JPG"

如何使用该路径在 Image 组件中显示图片（来自 react-native）？

以前我使用磁盘作为 CaptureTarget 选项，我能够显示该图像 url Image 组件，但现在要求将图像保存在相机胶卷中？

【问题讨论】：

你解决了吗？
@ajonno 请看我的回答

标签： react-native react-native-camera

【解决方案1】：

我已经使用RNFetchBlob从“assets-library://..”url获取base64，我的捕获函数是

this.camera.capture()
      .then((data) => {
        // console.log(data);
        RNFetchBlob.fs.readFile(data.path, 'base64')
          .then((base64data) => {
            let base64Image = `data:image/jpeg;base64,${base64data}`;
            this.props.addImagesToUntagged(data.path);
          })

      })

之后，我在此 base64 数据上为用户提供了一些应用内功能，最后当我需要将其发送到 s3 服务器时，我使用 axios 和 RNFetchBlob 发送此数据。以下代码为我提供了 s3 的签名 url

axios.get(ENDPOINT_TO_GET_SIGNED_URL, {params:{'file-name': file.name,'file-type': file.type,"content-type": 'evidence'}})
  .then(function (result) {
    //  console.log(result);
    returnUrl = result.data.url;
    var signedUrl = result.data.signedRequest;
    return uploadFile(file,signedUrl)
  })

在我的 uploadFile 函数中，我通过以下代码上传图片

RNFetchBlob.fetch('PUT', signedUrl,
    {'Content-Type' : file.type},
    RNFetchBlob.wrap(file.uri)
  )
  .then(resolve)

【讨论】：