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

Question

我试图从我的测试设备相机胶卷中获取图像以缩略图的形式呈现.我已成功从相机胶卷中取出图像并在列表视图中的一系列图像元素中显示它们,但它们需要很长时间才能加载.另外,我在React Native文档中读到了Image元素将选择它将渲染的空间的图像大小正确.

这是来自文档.

iOS为相机胶卷中的同一图像保存了多种尺寸,因为性能原因选择尽可能接近的图像非常重要.在显示200x200缩略图时,您不希望使用全质量3264x2448图像作为源.如果存在精确匹配,React Native将选择它,否则它将使用至少大50%的第一个,以避免在从近似大小调整大小时出现模糊.所有这些都是默认完成的,因此您不必担心编写繁琐(且容易出错)的代码来自己完成.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 阵营中。

你可以检查一下。

您必须修改 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:@{...}]。

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

检查链接，您将看到“新文件”，其中包含缩略图（125 x 125 大小）。