前言

最近在做RN項(xiàng)目，記錄一下用到的一點(diǎn)關(guān)于照相機(jī)和圖片選擇的知識(shí)，

react-native-image-picker的GtiHub地址，了解這些屬性

如果要實(shí)現(xiàn)多個(gè)圖像選擇，裁剪，壓縮等功能需要 react-native-image-crop-picker大家可以先看這個(gè)

添加依賴(lài)

安裝

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

保險(xiǎn)一些 運(yùn)行一下沒(méi)壞處

react-native link

在使用前我們先配置環(huán)境：

一、安卓環(huán)境配置
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文件中添加權(quán)限：

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

二：蘋(píng)果環(huán)境配置
1.添加權(quán)限
在info.plist中配置

NSPhotoLibraryUsageDescription

和

NSCameraUsageDescription

（會(huì)自動(dòng)添加Privacy - Camera Usage Description和Privacy - Photo Library Usage Description，避免查找麻煩）

2.下圖兩處是否自動(dòng)添加上了，如果沒(méi)有l(wèi)ink 或者手動(dòng)添加

react-native link react-native-image-picker

JS代碼 先定義

const photoOptions = {title:'請(qǐng)選擇',quality: 0.8,cancelButtonTitle:'取消',takePhotoButtonTitle:'拍照',chooseFromLibraryButtonTitle:'選擇相冊(cè)',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});}});}

一個(gè)例子的完整代碼：

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

在需要選擇的地方寫(xiě)上這些代碼即可。

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

簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
https://github.com/react-comm...
https://github.com/ivpusic/re...

總結(jié)

以上是生活随笔為你收集整理的刚刚在用的React Native的照相机和图片 react-native-image-picker的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。