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

OKですが、反応ネイティブのObjective-Cパーティーに手を入れなければなりません。

thisを確認できます。

RCTCameraRollManager.mファイルを変更する必要があります。 [assets addObject:@{...}]メソッドの前に

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

をして追加します：

あなたはこれらの行を追加する必要があります

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

を[assets addObject:@{...}]メソッドの後。

[assets addObject:@{の方法で@"base64": base64Encodedを追加することもできます。

リンクを確認すると、サムネイル（125×125サイズ）を示す「新しいファイル」があります。

Answer 2

私も解決策を見つけるのに苦労しました。明らかに、react-native-image-resizer

がこれを解決します。ここ は、私はそれを使用する方法である：

import ImageResizer from 'react-native-image-resizer'; 

async getPhotos(){ 
    await CameraRoll.getPhotos({ 
     first: 10 , 
     assetType: 'Photos' 
    }) 
    .then(r => { 
     this.setState({ photos:r.edges, endCursorPhotos:r.page_info.end_cursor }) 
     let resizePromiseArray = [] 
     for(let i=0; i<r.edges.length; i++){ 
      resizePromiseArray.push(ImageResizer.createResizedImage(r.edges[i].node.image.uri , 300, 500, 'JPEG', 100)) 
     } 
     return Promise.all(resizePromiseArray) 
    }) 
    .then(newUris=>{ 
     // console.log(JSON.stringify(this.state.photos,null,4)) 
     let newPhotos = this.state.photos.map((photo,i) => { 
      photo.node.image['optiUri'] = newUris[i] 
      return photo 
     }) 
     this.setState({ photos:newPhotos }) 
    }) 
    .catch(err =>{ 
     console.log(err) 
    }) 
} 

私はなる必要があるとして、いずれかで使用するためのオプションを持っているイメージオブジェクトにサムネイルを追加しています。
1つの画像のサイズを変更できます。

これは信じられないほど速いわけではないので、componentDidMountで行う方が良いです。 さらに便利な方法は、モーダルの写真でそれを使用し、親コンポーネントが写真を読み込んで保存する前に状態にすることです