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

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

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相对应，npm install react-native-fs --save 属于最终正在运行的应用，而不是javascript。

3。使用RNFS保存本地图像

首先运行以下命令：

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

我们可以保存本地图片：

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:drawable="@drawable/login_editext_blue_border"/>
<item
    android:state_focused="true"
    android:drawable="@drawable/login_editext_blue_border"/>
<item
    android:drawable="@drawable/login_editext_grey_border"/>

感谢。

Answer 2

使用此 saveToCameraRoll 方法。

import { CameraRoll } from 'react-native';

 CameraRoll.saveToCameraRoll(url)
    .then(alert('Done', 'Photo added to camera roll!')) 
    .catch(err => console.log('err:', err))
}

需要用户权限才能访问运行iOS 10或更高版本的设备上的相机胶卷。在Info.plist中添加NSPhotoLibraryUsageDescription密钥，该字符串带有描述您的应用如何使用此数据的字符串。该密钥将在Xcode中显示为“隐私-照片库使用说明”。如果您要针对运行iOS 11或更高版本的设备，则还需要在Info.plist中添加NSPhotoLibraryAddUsageDescription键。