React Native的照相机和图片

小鱼儿 2021-09-15 16:30 340阅读 0赞

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

属性

![70][] ![70 1][]

完整的代码

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

[react-native-image-crop-picker]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fivpusic%2Freact-native-image-crop-picker
[70]: https://img-blog.csdn.net/20180711154035557?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20210908/8ca348fa08754c48b2a22fa1b6eba884.png