react-native - React Native - 如何获取相机胶卷缩略图而不是全尺寸图像

Question

我试图从我的测试设备相机胶卷中获取图像以呈现为缩略图。我已成功从相机胶卷中获取图像并将它们显示在 ListView 中的一系列 Image 元素中，但加载它们需要很长时间。此外，我在 React Native 文档中读到 Image 元素将选择将渲染到的空间的正确图像大小。

这是来自文档。

iOS saves multiple sizes for the same image in your Camera Roll, it is very important to pick the one that's as close as possible for performance reasons. You wouldn't want to use the full quality 3264x2448 image as source when displaying a 200x200 thumbnail. If there's an exact match, React Native will pick it, otherwise it's going to use the first one that's at least 50% bigger in order to avoid blur when resizing from a close size. All of this is done by default so you don't have to worry about writing the tedious (and error prone) code to do it yourself. https://facebook.github.io/react-native/docs/image.html#best-camera-roll-image

我用来读取图像的代码非常简单。

    CameraRoll.getPhotos({
        first: 21,
        assetType: 'Photos'
    }, (data) => {
        console.log(data);
        var images = data.edges.map((asset) => {
            return {
                uri: asset.node.image.uri
            };
        });

        this.setState({
            images: this.state.images.cloneWithRows(images)
        });
    }, () => {
        this.setState({
            retrievePhotoError: messages.errors.retrievePhotos
        });
    });

然后渲染它我有这些功能。

renderImage(image) {
    return <Image resizeMode="cover" source={{uri: image.uri}} style={[{
        height: imageDimensions, // imageDimensions == 93.5
        width: imageDimensions
    }, componentStyles.thumbnails]}/>;
},

render() {
    <ListView
        automaticallyAdjustContentInsets={false}
        contentContainerStyle={componentStyles.row}
        dataSource={this.state.images}
        renderRow={this.renderImage}
    />
}

我在这里缺少什么？我要疯了!!!

Answer 1

好的，这是可能的，但您必须将手放在 react-native 的 Objective-C 派对中。

您可以查看 this .

您必须修改 RCTCameraRollManager.m 文件。

你必须添加这些行:

ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];

NSURL *url = [[NSURL alloc] initWithString:uri];

[library assetForURL:url resultBlock:^(ALAsset *asset) {

  // Create an ALAssetRepresentation object using our asset
  // and turn it into a bitmap using the CGImageRef opaque type.
  CGImageRef imageRef = [asset thumbnail];
  CGSize dimensions = [UIImage imageWithCGImage:imageRef].size;

  // Create UIImageJPEGRepresentation from CGImageRef
  NSData *imageData = UIImageJPEGRepresentation([UIImage imageWithCGImage:imageRef], 0.1);

之前 [assets addObject:@{...}]方法并添加:

} failureBlock:^(NSError *error) {
  NSLog(@"that didn't work %@", error);
}];

后 [assets addObject:@{...}]方法。

您还可以添加 Prop @"base64": base64Encoded在 [assets addObject:@{方法。

检查链接，您有“新文件”，它为您提供缩略图(125 x 125 大小)。