前言

最近在做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...

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。