React Native 갤러리 사진 전부 가지고 오기

설치 필요 

1)  npm install @react-native-community/cameraroll --save

 

주소 : www.npmjs.com/package/@react-native-community/cameraroll

@react-native-community/cameraroll

 2)  npm install  react-native-unimodules

주소 : www.npmjs.com/package/react-native-unimodules

react-native-unimodules

소스 : 

import React, { Component  } from 'react';
import {
  Platform,
  PermissionsAndroid,
  View,
  Image,
  FlatList
} from 'react-native';

import CameraRoll from "@react-native-community/cameraroll";


class Image_Multi extends Component{

    constructor(props) {
        super(props);
        this.state = {
            data:''
        };
      }

      async componentDidMount(){
        if (Platform.OS === 'android') {
            const result = await PermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
              {
                title: 'Permission Explanation',
                message: 'ReactNativeForYou would like to access your photos!',
              },
            );
            if (result !== 'granted') {
              console.log('Access to pictures was denied');
              return;
            }
          }
    
          CameraRoll.getPhotos({
            first: 50,
            assetType: 'Photos',
          })
          .then(res => {
            this.setState({ data: res.edges });
          })
          .catch((error) => {
             console.log(error);
          });
        
      }


    render(){
        return(
            <View>
                <FlatList
                    data={this.state.data}
                    numColumns={3}
                    renderItem={({ item }) => <Image
                        style={{
                            width: '33%',
                            height: 150,
                        }}
                        source={{ uri: item.node.image.uri }}
                    />}
                />
            </View>
        )
    }
}


export default Image_Multi;