在 React Native 中将远程图像保存到相机胶卷? [英] Save remote image to camera roll in React Native?

问题描述

我只从 ReactNative CameraRoll 的 saveImageWithTag 函数得到错误.使用以下内容保存本地图像:

CameraRoll.saveImageWithTag('./path/to/myimage.png');.then(res => console.log(res)).catch(err => console.log(err));

给我错误:

错误:无法打开文件myimage.png"，因为没有这样的文件.(...)

./path/to/myimage.png 在这种情况下是我用来require Image 的图像的路径来源.本地图像的完整路径应该是什么?我是否需要以不同的方式存储它们以使其可访问?

解决方案

0.简答

使用

然后，我创建了一个 Image 和一个 Button:

 渲染:function() {返回 (<视图样式={styles.container}><Image ref="logoImage";样式={{ 高度:50，宽度:50 }}source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/><TouchableHighlight style={styles.button} onPress={this._handlePressImage} underlayColor='#99d9f4'><Text style={styles.buttonText}>保存图片</Text></TouchableHighlight></查看>);},

当我按下按钮时，程序会将图像保存到相机胶卷:

 _handlePressImage: function() {console.log('_handlePressImage.');var uri = this.refs.logoImage.props.source;控制台日志(uri)；CameraRoll.saveImageWithTag(uri, function(result) {控制台日志(结果)；}, 函数(错误){控制台日志(错误)；});},

React Native 警告我 API 已弃用，只需使用 promise 代替:

var promise = CameraRoll.saveImageWithTag(uri);promise.then(函数(结果){console.log('保存成功' + 结果);}).catch(函数(错误){console.log('保存失败' + 错误);});

现在，我们可以在相机胶卷中看到徽标图像了.

2.对于您的内容中的真正问题

尽管您的标题是 remote，但您的代码使用了 local 路径.

给出路​​径'./path/to/myimage.png'，我假设图片路径是相对于.js文件的.也就是说，您的图像与最终运行的应用程序无关，因此无法找到图像文件.

现在将 Image 更改为使用本地文件:

并像这样保存图像:

var promise = CameraRoll.saveImageWithTag('./logo_og.png');

导致:

因为CameraRoll API对应的是Native Component，属于最终运行的app，而不是javascript.

3.使用

我们可以保存本地图片:

var cacheImagePath = RNFS.CachesDirectoryPath+/logo_og.png";console.log(cacheImagePath);var promise = CameraRoll.saveImageWithTag(cacheImagePath);promise.then(函数(结果){console.log('保存成功' + 结果);}).catch(函数(错误){console.log('保存失败' + 错误);});

谢谢.

I'm getting nothing but errors from the ReactNative CameraRoll's saveImageWithTag function. Saving a local image with something like:

CameraRoll.saveImageWithTag('./path/to/myimage.png');
      .then(res => console.log(res))
      .catch(err => console.log(err));

gives me the error:

Error: The file "myimage.png" couldn’t be opened because there is no such file.(…)

./path/to/myimage.png in this case is the path I'd use to require an image for an Image source. What should the full path be for a local image be? Do I need to store them differently to make them accessible?

解决方案

0. Short answer

Use RNFS to locate the local image.

1. For your title 'Save remote image to camera roll in React Native'

The keyword is remote.

Before using CameraRoll, we should link the library first.

Then, I create one Image and one Button:

  render: function() {
    return (
      <View style={styles.container}>
          <Image ref="logoImage"
            style={{ height:50, width: 50 }}
            source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          />
          <TouchableHighlight style={styles.button} onPress={this._handlePressImage} underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Save Image</Text>
          </TouchableHighlight>
      </View>
    );
  },

When I press the button, the program will save the image to camera roll:

  _handlePressImage: function() {
    console.log('_handlePressImage.');

    var uri = this.refs.logoImage.props.source;
    console.log(uri);
    CameraRoll.saveImageWithTag(uri, function(result) {
      console.log(result);
    }, function(error) {
      console.log(error);
    });
  },

React Native warns me that the API is deprecated, just use promise instead:

var promise = CameraRoll.saveImageWithTag(uri);
promise.then(function(result) {
  console.log('save succeeded ' + result);
}).catch(function(error) {
  console.log('save failed ' + error);
});

Now, we can see the logo image in our camera roll.

2. For your real problem in your content

Despite your title says remote, your code uses the local path.

Give the path './path/to/myimage.png', I assume that the image path is relative to the .js file. That is, your image is not relative to the final running app, so it can not find the image file.

Now change the Image to use local file:

<Image ref="logoImage"
  style={{ height:50, width: 50 }}
  source={require('./logo_og.png')}
/>

and save the image like this:

var promise = CameraRoll.saveImageWithTag('./logo_og.png');

which results in:

Because CameraRoll API is corresponding to the Native Component, which belongs to the final running app, not the javascript.

3. Use RNFS to save local images

First run the command below:

npm install react-native-fs --save

and then link the library.

After Putting the image under Library/Caches:

we can save the local image:

var cacheImagePath = RNFS.CachesDirectoryPath+"/logo_og.png";
console.log(cacheImagePath);
var promise = CameraRoll.saveImageWithTag(cacheImagePath);
promise.then(function(result) {
  console.log('save succeeded ' + result);
}).catch(function(error) {
  console.log('save failed ' + error);
});

Thanks.

这篇关于在 React Native 中将远程图像保存到相机胶卷?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！