React Native的照相机和图片

React Native的照相机和图片

react-native-image-picker

如果要实现多个图像选择，裁剪，压缩等功能需要 react-native-image-crop-picker

安装

yarn add react-native-image-picker      react-native link

环境配置

1.android

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

属性

完整的代码

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', //类型 'front' or 'back'
                            mediaType: 'photo',//图片或视频 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android 
                            videoQuality: 'high', //视频质量
                            durationLimit: 10, //最大视频录制时间
                            maxWidth: 300, //图片最大宽度
                            maxHeight: 300,//图片最大高度
                            quality: 0.8,//图片质量
                            angle: 0, //
                            allowsEditing: false,//是否可以编辑
                            noData: false, //如果true 则禁用data生成的base64字段，（极大地提升图片的性能）
                            storageOptions: { skipBackup: true } //如果为true该照片不会备份到iCloud
                        }; 
                         
                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 } 
                            });