React-nativeカメラロールとカメラロールAPIからすべての写真を取得

Question

私は、反応したネイティブCameraRoll.getPhotos APIを使用してカメラロール写真を取得しようとしています。私が見つけた問題は、ドキュメンテーションがすばらしくないことです。 react-native official documentationには、このパラメータに関する詳細を得ることができるgetPhotosReturnCheckerとgetPhotosParamCheckerという2つの用語があります。

私はそれは常に我々がに、CameraRollから取得することができますどのように多くの写真を決定づける最初のパラメータを必要とし、これらによるとbhwgroup blog

{ 
    first: ..., // (required) The number of photos wanted in reverse order of the photo application 
    after: ..., // A cursor returned from a previous call to 'getPhotos' 
    groupTypes: ..., // Specifies which group types to filter the results to 
        // One of ['Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream', 'SavedPhotos'(default)] 
    groupName: ..., // Specifies filter on group names, like 'Recent Photos' or custom album titles 
    assetType: ... // Specifies filter on assetType 
        // One of ['All', 'Videos', 'Photos'(default)] 
} 

からCameraRoll.getPhotosに渡すことができる以下のオブジェクトを見つけました。代わりに、私はカメラのロールからすべての写真をしたい場合はどのように私はそれを得ることができますか？

Answer 1

すべての写真にアクセスするには、ページングをする必要があります。基本的には、それらをチャンクにロードし、各フェッチ後に中断した場所を追跡しています。

this.state = { 
    dataSource: ds.cloneWithRows([]), 
    assets: [], 
    lastCursor: null, 
    noMorePhotos: false, 
    loadingMore: false, 
}; 

これらと同様の機能をフェッチする必要があります。この例では、私が「Selfies」アルバムでフィルタリングすることができた場合、あなたが知っていますListView.DataSource

tryPhotoLoad() { 
    if (!this.state.loadingMore) { 
    this.setState({ loadingMore: true },() => { this.loadPhotos(); }); 
    } 
} 

loadPhotos() { 
    const fetchParams = { 
    first: 35, 
    groupTypes: 'SavedPhotos', 
    assetType: 'Photos', 
    }; 

    if (Platform.OS === 'android') { 
    // not supported in android 
    delete fetchParams.groupTypes; 
    } 

    if (this.state.lastCursor) { 
    fetchParams.after = this.state.lastCursor; 
    } 

    CameraRoll.getPhotos(fetchParams).then((data) => { 
    this.appendAssets(data); 
    }).catch((e) => { 
    console.log(e); 
    }); 
} 

appendAssets(data) { 
    const assets = data.edges; 
    const nextState = { 
    loadingMore: false, 
    }; 

    if (!data.page_info.has_next_page) { 
    nextState.noMorePhotos = true; 
    } 

    if (assets.length > 0) { 
    nextState.lastCursor = data.page_info.end_cursor; 
    nextState.assets = this.state.assets.concat(assets); 
    nextState.dataSource = this.state.dataSource.cloneWithRows(
     _.chunk(nextState.assets, 3) 
    ); 
    } 

    this.setState(nextState); 
} 

endReached() { 
    if (!this.state.noMorePhotos) { 
    this.tryPhotoLoad(); 
    } 
}