react-native-image-picker를 사용하여 카메라 사용, 이미지 선택하기

라이브러리를 설치한다.

npm i react-native-image-picker

🍪 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" />

🍩 ios 권한 설정

ios/App_이름/info.plist 에 추가한다.

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app does not require access to the microphone.</string>
<key>NSCameraUsageDescription</key>
<string>This app requires access to the camera.</string>

또한, 라이브러리 설치 후 pod install을 한다.

 

• 사용 예시 (카메라로 사진을 찍은 뒤 이미지 사용)

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

const App = () => {
  const [avatar, setAvatar] = useState('');

  const addImage = async () => {
    await launchCamera({}, response => {
      setAvatar(response.assets[0].uri);
    });
  };

  return (
    <View style={styles.container}>
      <Text>Hello</Text>
      {avatar?.length > 0 ? (
        <Image source={{uri: avatar}} style={styles.avatar} />
      ) : null}
      <Button title="Add an image" onPress={() => addImage()} />
    </View>
  );
}

export default App;

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

• 사용 예시 (갤러리에서 기존의 이미지 선택)

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

const App = () => {
  const [avatar, setAvatar] = useState('');

  const addImage = async () => {
    await launchImageLibrary({}, response => {
      setAvatar(response.assets[0].uri);
    });
  };

  return (
    <View style={styles.container}>
      <Text>Hello</Text>
      {avatar?.length > 0 ? (
        <Image source={{uri: avatar}} style={styles.avatar} />
      ) : null}
      <Button title="Add an image" onPress={() => addImage()} />
    </View>
  );
}

export default App;

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

 

 

 

공식 문서 : https://github.com/react-native-image-picker/react-native-image-picker

GitHub - react-native-image-picker/react-native-image-picker: A React Native module that allows you to use native UI to select m

참고 자료 : https://stackoverflow.com/questions/39519773/nsphotolibraryusagedescription-key-must-be-present-in-info-plist-to-use-camera-r

NSPhotoLibraryUsageDescription key must be present in Info.plist to use camera roll