刚刚在用的React Native的照相机和图片 react-native-image-picker

前言

最近在做RN项目，记录一下用到的一点关于照相机和图片选择的知识，

react-native-image-picker的GtiHub地址，了解这些属性

如果要实现多个图像选择，裁剪，压缩等功能需要 react-native-image-crop-picker大家可以先看这个

添加依赖

安装

yarn add react-native-image-picker

或者是 npm install react-native-image-picker@latest --save

保险一些 运行一下没坏处

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()

二：苹果环境配置
1.添加权限
在info.plist中配置

NSPhotoLibraryUsageDescription

和

NSCameraUsageDescription

（会自动添加Privacy - Camera Usage Description和Privacy - Photo Library Usage Description，避免查找麻烦）

2.下图两处是否自动添加上了，如果没有link 或者手动添加

react-native link react-native-image-picker

JS代码 先定义

const photoOptions = {
    title:'请选择',
    quality: 0.8,
    cancelButtonTitle:'取消',
    takePhotoButtonTitle:'拍照',
    chooseFromLibraryButtonTitle:'选择相册',
    allowsEditing: true,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};

再使用

choosePicker=()=>{
        ImagePicker.showImagePicker(photoOptions, (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 {
                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
                });
            }
        });
    }

一个例子的完整代码：

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
    }
});

效果：

image.png
自定义选择器选择图片

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!
  });

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

链接：https://www.jianshu.com/p/727...

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
https://github.com/react-comm...
https://github.com/ivpusic/re...