[react-native] EXPO로 시작해보기 13 - 갤러리에서 이미지가져오기 (ImagePicker)

 

전체코드 

import React from 'react';
.
.
.
import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';

export default class App extends React.Component {
	  state = {
      	.
      	.
      	.
    	image: null,
      }
      
  _pickImage = async () => {
    const {status_roll} = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
    });
    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
  
  
  render(){
    let { image } = this.state;
    
    return (
    <View style={styles.imgLine}>
            {image == null ? <Image source={require('./assets/default.jpg')} style={{width:"100%", height: 200 }} /> :
              <Image source={{ uri: image }} style={{ width:"100%", height: 200 }} />}
              <View 
               style={styles.imgBtn}>
               <Button
               style={{fontSize:13}}
               title="이미지선택"
               onPress={this._pickImage}
               color="#F07C84"
               />
               </View>
          </View>
     )
  }
  

}

 

 

 

 

 

참고

https://docs.expo.io/versions/v34.0.0/sdk/imagepicker/

ImagePicker - Expo Documentation