[React Native] Image Picker

1. 사전 작업

새로운 프로젝트 생성

 

 

 

2. Image Picker

1) Image Picker 설치

npm install --save react-native-image-picker

cd ios
pod install
cd ..

※ Android 에뮬레이터 실행할 때, ImagePicker 라이브러리 버전에 따라 생기는 '> Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:react-native-image-picker]' 문제가 발생한다면,  'android/build.gradle'에서 minsdkVersion 정보를 오류의 정보대로 버전을 수정하면 된다.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 21
        compileSdkVersion = 28
        targetSdkVersion = 28
    }

---

[참고] https://github.com/razorpay/react-native-razorpay/issues/289

2) Android 설정

• 'android/app/src/main/AndroidManifest.xml' 접근 권한 수정

 

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

※ 0.60 버전 이상에서는 Auto Linking을 지원하기 때문에 권한 설정을 별도로 해주지 않아도 된다. 만약 추가로 설정했을 경우에는, 오류가 발생하는 경우가 있다.

오류

---

[참고] https://www.npmjs.com/package/react-native-image-picker

3) import 

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

4) 카메라 구동

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Button } from 'react-native';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

class App extends Component {

  state = {
    avatar: ''
  }

  addImage = () => {
    launchCamera({}, response => {
      // console.warn(response)
      this.setState({
        avatar: response.uri
      })
    })
  }

  render () {
    return (
      <View style={styles.container}>
        <Image
          style={styles.avatar}
          source={{uri: this.state.avatar}}
        />
      
        <Button
          title="Add an Image"
          onPress={() => this.addImage()}
        />
      </View>
    )
 }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E4AB26',
    alignItems: 'center',
    justifyContent: 'center'
  },
  avatar: {
    width: '100%',
    height: 400
  }
});

export default App;

※ iOS 시뮬레이터의 경우에는 카메라를 기동시키는 기능을 지원하지 않는다.

카메라 구동

5) 갤러리

갤러리에 있는 사진을 불러오는 경우에는 launchCamera 메서드를 이용하면 된다.

...  

  addImage = () => {
    launchCamera({}, response => {
      // console.warn(response)
      this.setState({
        avatar: response.uri
      })
    })
  }

...

6) showImagePicker

카메라, 갤러리 두 가지 기능을 모두 제공하는 showImagePicker API는 더이상 지원하지 않는다고 한다.

---

[참고] github.com/react-native-image-picker/react-native-image-picker

안녕하세요