http://www.hangge.com/blog/cache/detail_1617.html

React Native - 使用圖片選擇器react-native-image-picker拍照、選照片

? 發(fā)布：2018/3/7 有時我們程序中需要提供用戶上傳照片的功能。照片可以從設備相冊中選擇，也可以使用攝像頭直接拍攝。這個功能使用? react-native-image-picker?庫就可以很方便的實現(xiàn)。

1，react-native-image-picker介紹

• react-native-image-picker?是一個第三方的開源庫，它提供了原生的?UI?界面供用戶選擇圖片或視頻。圖片或視頻的來源可以是系統(tǒng)相簿，也可以是相機直接拍攝。
• 使用?react-native-image-picker?我們不必關心如何與設備相冊、攝像頭如何交互，用戶操作完畢后我們就可以直接得到資源的?URI?地址、或者?base64?字符串（限圖片）。
• GitHub?主頁地址：https://github.com/marcshilling/react-native-image-picker

2，安裝配置

（1）首先在“ 終端”中進入項目目錄，然后執(zhí)行如下命令安裝最新版本的? react-native-image-picker

1	npm install react-native-image-picker @latest? --save

（2）接著運行如下命令鏈接相關的依賴庫：

1	react-native link

（3）由于我們需要調用攝像頭拍照、錄像，同時拍完還要保存到相冊中。因此需要在? Info.plist?里配置請求攝像頭、麥克風、及照片的相關描述字段：

• Privacy - Camera Usage Description
• Privacy - Photo Library Usage Description
• Privacy - Microphone Usage Description

3，使用樣例

（1）效果圖

• 點擊“選擇照片”按鈕，界面底部出現(xiàn)來源選擇菜單。用戶可以自行選擇拍照、還是從相冊中選擇。
• 菜單中我還添加了個自定義按鈕“hangge.com圖片”，點擊會有響應事件。
• 選擇照片選擇或者拍攝完畢后，會將最終的圖片顯示在?Image?組件里。

? ? ? ?

（2）樣例代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

import React, { Component } from? 'react' ; import { ?? AppRegistry, ?? StyleSheet, ?? Text, ?? View, ?? Image, ?? AlertIOS } from? 'react-native' ; //圖片選擇器 var? ImagePicker = require( 'react-native-image-picker' ); //圖片選擇器參數(shù)設置 var? options = { ?? title:? '請選擇圖片來源' , ?? cancelButtonTitle: '取消' , ?? takePhotoButtonTitle: '拍照' , ?? chooseFromLibraryButtonTitle: '相冊圖片' , ?? customButtons: [ ???? {name:? 'hangge' , title:? 'hangge.com圖片' }, ?? ], ?? storageOptions: { ???? skipBackup:? true , ???? path:? 'images' ?? } }; //默認應用的容器組件 class App extends Component { ??? //構造函數(shù) ??? constructor(props) { ?????? super (props); ?????? this .state = { ?????????? avatarSource:? null ?????? }; ??? } ??? //渲染 ??? render() { ?????? return? ( ???????? <View style={styles.container}> ????????? <Text style={styles.item} onPress={ this .choosePic.bind( this )}>選擇照片</Text> ????????? <Image source={ this .state.avatarSource} style={styles.image} /> ???????? </View> ?????? ); ??? } ??? //選擇照片按鈕點擊 ??? choosePic() { ?????? ImagePicker.showImagePicker(options, (response) => { ?????? console.log( 'Response = ' , response); ?????? if? (response.didCancel) { ???????? console.log( '用戶取消了選擇！' ); ?????? } ?????? else? if? (response.error) { ???????? alert( "ImagePicker發(fā)生錯誤："? + response.error); ?????? } ?????? else? if? (response.customButton) { ???????? alert( "自定義按鈕點擊："? + 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 ???????? }); ?????? } ???? }); ??? } ? } //樣式定義 const styles = StyleSheet.create({ ?? container:{ ???? flex: 1, ???? marginTop:25 ?? }, ?? item:{ ???? margin:15, ???? height:30, ???? borderWidth:1, ???? padding:6, ???? borderColor: '#ddd' , ???? textAlign: 'center' ?? }, ?? image:{ ??? height:198, ??? width:300, ??? alignSelf: 'center' , ? }, }); AppRegistry.registerComponent( 'ReactDemo' , () => App);

4，直接啟動相機或訪問相冊

上面的樣例中我們是先彈出個選擇菜單，讓用戶決定是拍照，還是從相冊中選擇圖片。
其實我們也可以跳過這個步驟，直接調用攝像頭拍照，或者直接打開相冊讓用戶選擇照片。

1 2 3 4 5 6 7 8 9

//啟動相機拍照 ImagePicker.launchCamera(options, (response)? => { ???? //響應結果處理參考上面樣例 }); //打開系統(tǒng)相冊 ImagePicker.launchImageLibrary(options, (response)? => { ???? //響應結果處理參考上面樣例 });

原文出自： www.hangge.com ??轉載請保留原文鏈接： http://www.hangge.com/blog/cache/detail_1617.html

總結

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

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