react-native-image-picker

支持直接调用摄像头拍摄/从设备相册中选择图片， 原生界面

1 安装配置

npm install react-native-image-picker@latest --save
react-native link

iOS 端

1 打开XCode项目， 添加 node_modules =>react-native-image-picker =>ios => RNImagePicker.xcodeproj 到 Libraries中

2 添加 RNImagePicker.a 到 Build Phases =》 Link Binary With Libraries

3 添加隐私权限 NSPhotoLibraryUsageDescription/NSCameraUsageDescription/NSMicrophoneUsageDescription

Android 端暂未测试

2 代码效果

/**
 * Created by licc on 2017/7/9.
 */

import React, {Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    AlertIOS
} from 'react-native';

import ImagePicker from 'react-native-image-picker'
import NavigationBar from './NavigationBar'


//图片选择器参数设置
const options = {
    title: '请选择图片来源',
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'相册图片',
    customButtons: [
        {name: '自定义', title: '自定义图片'},
    ],
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

export default class ImagePickerExample extends Component {

    constructor(props) {
        super(props);
        this.state = {
            avatarSource: null
        };
    }

    render(){

        return(
            <View style={styles.container}>
                <NavigationBar
                    title={'图片选择器'}
                    statusBar={{backgroundColor:'blue'}}
                />

                <Text style={styles.item} onPress={this.doChoose.bind(this)}>选择照片</Text>
                <Image source={this.state.avatarSource} style={styles.image}/>
            </View>
        );
    }

    doChoose(){

        ImagePicker.showImagePicker(options,(response)=>{

            if(response.didCancel) {
                console.log('用户取消了选择！');
            } else if (response.error) {
                alert("ImagePicker发生错误：" + response.error);
            } else if (response.customButton){
                alert("自定义按钮点击：" + response.customButton)
            } else {
                let source = {uri:response.uri};

                this.setState({
                    avatarSource:source
                });
            }

        });
    }
}


const styles = StyleSheet.create({

    container:{
        flex:1
    },

    image:{
        paddingTop:10,
        height:198,
        width:300,
        alignSelf:'center',
    },

    item:{

        marginTop:10,
        marginLeft:5,
        marginRight:5,
        height:30,
        borderWidth:1,
        padding:6,
        borderColor:'#ddd',
        textAlign:'center'
    },
});

3 直接启动相机或访问相册

//启动相机拍照
ImagePicker.launchCamera(options, (response)  => {
    //响应结果处理参考上面样例
});
 
//打开系统相册
ImagePicker.launchImageLibrary(options, (response)  => {
    //响应结果处理参考上面样例
});