React Native的照相机和图片 react-native

在项目中随处可见的照相机和选择图片功能

react-native-image-picker的GtiHub地址，我们一定要多看看这些，了解这些属性小萌把属性复制到这里了

这个只是选择，如果要实现多个图像选择，裁剪，压缩等功能需要 react-native-image-crop-picker 这个小萌以后也会介绍的

添加依赖

安装

yarn add react-native-image-picker

保险一些 运行一下没坏处

react-native link

在使用前我们先配置环境：

一、安卓环境配置

1，在android/settings.gradle文件中添加如下代码：
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

2，在android/app/build.gradle文件的dependencies中添加如下代码：
compile project(':react-native-image-picker')

3，在AndroidManifest.xml文件中添加权限：
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

4，最后在MainApplication.Java文件中添加如下代码：
import com.imagepicker.ImagePickerPackage;
new ImagePickerPackage()

二：苹果环境配置

在info.plist中配置即可

属性

响应对象

例子，完整代码的贴出是为了照顾初学者哦
完整代码：

import ImagePicker from 'react-native-image-picker';

import {
  Platform,
  StyleSheet,
  Text,
  View,
    PixelRatio,
    TouchableOpacity,
    Image,

} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});


export default class App extends Component {
    state = {
        avatarSource: null,
        videoSource: null
    };


    //选择图片
    selectPhotoTapped() {
        const options = {
            title: '选择图片', 
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照', 
            chooseFromLibraryButtonTitle: '选择照片', 
            customButtons: [
                {name: 'fb', title: 'Choose Photo from Facebook'},
              ],
            cameraType: 'back',
            mediaType: 'photo',
            videoQuality: 'high', 
            durationLimit: 10, 
            maxWidth: 300,
            maxHeight: 300,
            quality: 0.8, 
            angle: 0,
            allowsEditing: false, 
            noData: false,
            storageOptions: {
                skipBackup: true  
            }
        };

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

            if (response.didCancel) {
                console.log('User cancelled photo picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = { uri: response.uri };

                // You can also display the image using data:
                // let source = { uri: 'data:image/jpeg;base64,' + response.data };

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

    //选择视频
    selectVideoTapped() {
        const options = {
            
            title: '选择视频',
           cancelButtonTitle: '取消',
            takePhotoButtonTitle: '录制视频',
            chooseFromLibraryButtonTitle: '选择视频',
            mediaType: 'video',
            videoQuality: 'medium'
        };

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

            if (response.didCancel) {
                console.log('User cancelled video picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                this.setState({
                    videoSource: response.uri
                });
            }
        });
    }

    render() {
        return (
            
            <View style={styles.container}>
                <TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
                    <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 30}]}>
                        { this.state.avatarSource === null ? <Text>选择照片</Text> :
                            <Image style={styles.avatar} source={this.state.avatarSource} />
                        }
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={this.selectVideoTapped.bind(this)}>
                    <View style={[styles.avatar, styles.avatarContainer]}>
                        <Text>选择视频</Text>
                    </View>
                </TouchableOpacity>

                { this.state.videoSource &&
                <Text style={{margin: 8, textAlign: 'center'}}>{this.state.videoSource}</Text>
                }
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    avatarContainer: {
        borderColor: '#9B9B9B',
        borderWidth: 1 / PixelRatio.get(),
        justifyContent: 'center',
        alignItems: 'center'
    },
    avatar: {
        borderRadius: 50,
        width: 100,
        height: 100
    }

});

效果：

自定义选择器选择图片

const options = {
            
        
        };
        // Open Image Library:
    ImagePicker.launchImageLibrary(options, (response)  => {
    // Same code as in above section!
     });
  
// Launch Camera:
ImagePicker.launchCamera(options, (response)  => {
    // Same code as in above section!
  });

在需要选择的地方写上这些代码即可。