react-native - 在 React Native 中将远程图像保存到相机胶卷？

Question

我从 ReactNative CameraRoll 的 saveImageWithTag 中得到的只是错误。功能。使用以下内容保存本地镜像:

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

给我错误:

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

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

Answer 1

0. 简答
使用RNFS定位本地镜像。
1. 对于您的标题“在 React Native 中将远程图像保存到相机胶卷”
关键字是remote .
使用前CameraRoll , 我们应该 link the library第一的。

然后，我创建一个 Image和一个 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>
    );
  },

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

  _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警告我 API 已弃用，只需使用 promise反而:

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

现在，我们可以在相机胶卷中看到 Logo 图像。
2.针对您内容中的真正问题
尽管你的标题是 remote ，您的代码使用 local小路。
给路径 './path/to/myimage.png' ，我假设图像路径是相对于 .js文件。也就是说，您的图像与最终运行的应用程序无关，因此无法找到图像文件。
现在更改 Image使用本地文件:

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

并像这样保存图像:

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

这导致:

因为 CameraRoll API对应于 Native Component ，它属于最终运行的应用程序，而不是 javascript。
3. 使用 RNFS保存本地镜像
首先运行以下命令:

npm install react-native-fs --save

然后链接库。
将图像放在 Library/Caches 下后:

我们可以保存本地镜像:

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);
});

谢谢。