ReactNative学习----8react-native-image-picker调用相机相册

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88567394

github地址：
https://github.com/react-native-community/react-native-image-picker

效果图：

使用步骤:
1cd 到项目目录下
yarn add react-native-image-picker
react-native link react-native-image-picker

2在android目录下在AndroidManifest文件中添加权限

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

3复制文档代码：
ChoosePicture.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Image, Alert} from 'react-native';
import ImagePicker from 'react-native-image-picker';


/**
 * 从相机，或者相册中选择图片，展示出来
 */
export default class ChoosePicture extends Component {
    constructor(props) {
        super(props);
        // 保存选择图片的信息
        this.state = {
            avatarSource: {},
        }
    }

    // 选择图片或相册
    onClickChoosePicture = () => {
        const options = {
            title: '',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '选择照片',
            storageOptions: {
                skipBackup: true,
                path: 'images',
            }
        };

        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                const source = {uri: response.uri};
                this.setState({
                    avatarSource: source,
                });
                console.warn(this.state.avatarSource.uri);
            }
        });
    }


    render() {
        return (
            <View style={styles.container}>
                {/*选择图片的按钮*/}
                <Text style={styles.textStyle}  onPress={() => this.onClickChoosePicture()}>选择图片</Text>
                {/*展示图片*/}
                <Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 30,
    },
    textStyle:{
        backgroundColor:'#66CCFF',
        paddingHorizontal:50,
        paddingVertical:10,
    },
    uploadAvatar:{
        width: 150,
        height: 150,
    }



});

源码下载：
walldemo2----ChoosePicture
https://download.csdn.net/download/zhaihaohao1/11022244