剛剛在用的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、安卓環境配置
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...