image picker

https://github.com/marcshilling/react-native-image-picker

https://goshakkk.name/react-native-camera-roll-image-picker/

https://facebook.github.io/react-native/docs/imagepickerios.html

기기의 camera roll에 접근하기 위해 아래의 스텝 필요

photo library usage 선언

RCTCemeraRoll library 연결

photo library usage 선언

현재위치, 카메라, 연락처 등 iOS에서 private 데이터는 사용자 허가 필요.

app metadata에서 목록화 하면 됨

react native 프로젝트 내 iOS 폴더에서 플젝이름.xcodeproj 열기

왼쪽 플젝이름 누르고 오른쪽 Info 탭 선택

Privacy - Photo Library Usage Description 이나

NSPhotoLibraryUsageDescription 세팅 필요

RCTCemeraRoll library 연결

React Native에서 제공하는 ImagePickerIOS 사용해야함

라이브러리 링크: https://facebook.github.io/react-native/docs/linking-libraries-ios.html

finder에서 node_modules/react-native/Libraries/CameraRoll 밑에 있는

CameraRoll.xcodproj을 

Xcode 안에 왼쪽 프로젝트 하단 Libraries 밑에 (drag해서)넣어준다

왼쪽 플젝이름 다시 누르고 우측에서 Build Phases 탭을 선택하고 Link Binary With Libraries 확장후 플러스 버튼 눌러 libRCTCameraRoll.a 추가

여기까지 했으면 Xcode 종료

개발.

react-native의 ImagePickerIOS 사용.

https://facebook.github.io/react-native/docs/imagepickerios.html

import React, { Component } from 'react';
import { View, Text, Button,  ImagePickerIOS, Image } from 'react-native';

class Detail extends Component {

    state = { image: null };

    componentDidMount() {
        this.pickImage();
    }

    pickImage() {
        ImagePickerIOS.openSelectDialog({}, imageUri => {
            this.setState({ image: imageUri });
        }, error => console.error(error));
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                {this.state.image?
                    <Image style={{ flex: 1 }} source={{ uri: this.state.image }} /> :
                    null
                }
            </View>
        )
    }
}

export default Detail;

---

에러

시뮬레이터에서 안 됨

실제 폰 꽂아야만 됨.

tutorial에서는 simulator인것 같은데?