React Native CameraRoll.getPhotos

时间:2017-06-30 09:53:17

标签: android react-native camera-roll

我想从我的Android设备查询所有图像,所以我使用api  CameraRoll.getPhotos,但我的Android设备有30张图片,但我只查询不到30张,所以你可以帮我吗?

// in constructor method

this.state = {             来源:null,             hasNextPage:true,             cursorEnd:null         };

//start load
componentDidMount() {
    this.queryImage();
}

//to query image
queryImage() {
    if (this.state.hasNextPage) {
        queryNativePictuire = {
            first: 11,
            assetType: "Photos",
            mimeTypes: ["image/jpeg"],
            groupTypes: 'SavedPhotos'
        };
        if (Platform.OS === 'android') {
            delete queryNativePictuire.groupTypes;
        }
        if (this.state.cursorEnd) {
            queryNativePictuire.after = this.state.cursorEnd;
        }
        let promise = CameraRoll.getPhotos(queryNativePictuire);
        promise.then((value) => {
            these.loadAsset(value);
        }, (error)=> {
            ToastAndroid.show("图片加载失败", ToastAndroid.SHORT);
        }).catch((error)=> {
            ToastAndroid.show("图片加载失败catch", ToastAndroid.SHORT);
        }).done();
    }
}

// parse data
loadAsset(value) {
    let myArray = new Array();
    if (value) {
        let edge = value.edges;
        if (edge.length > 0) {
            let pageInfo = value.page_info;
            these.setState({hasNextPage: pageInfo.has_next_page, cursorEnd: 
     pageInfo.end_cursor});
            for (let node of edge) {
                let picture = new Object();
                picture.type = node.node.type;
                picture.groupName = node.node.group_name;
                picture.uri = node.node.image.uri;
                picture.isStored = node.node.image.isStored;
                picture.timestamp = these.formateDate(node.node.timestamp);
                myArray.push(picture);
            }
        }
    }
//setState 
    these.setState({source: this.state.source == null ? myArray : 
    this.state.source.concat(myArray)});
}

//render flatList item
renderItem(data) {
    return (
        <View style={{
            padding: 15,
            flexDirection: 'row',
            alignItems: 'center',
            borderBottomWidth: 0.5,
            borderBottomColor: '#dedede'
        }}>
            <Image style={styles.image} resizeMethod={'resize'} resizeMode=
         {'cover'} source={{uri: data.item.uri}}/>
            <View style={{flex: 1, marginLeft: 10}}>
                <Text style={styles.text}>文件夹:{data.item.groupName}</Text>
                <Text style={styles.text}>创建日期{data.item.timestamp</Text>
                <Text style={styles.text}>文件路径:{data.item.uri}</Text>
            </View>
        </View>
    );
}

// render all
render() {
    return (
        <View style={{flex: 1, backgroundColor: 'white'}}>
            <Text style={{fontSize: 20}} 
                  onPress={()=> { this.queryImage()}}>点击加载更多</Text>
            <FlatList style={{flex: 1}} 
                      ref={(list)=> {this.flatList = list }}
                      data={this.state.source}
                      initialNumToRender={5}
                      onEndReachedThreshold={0.5} 
                      keyExtractor={
                      //key creator
                      (data, index)=>index + "_" }
                      renderItem={
                      //renderItem
                      this.renderItem}>
            </FlatList>
        </View>
    );
}

0 个答案:

没有答案