對(duì)于react native 我們一定會(huì)用到相冊(cè)和相機(jī)阅爽,項(xiàng)目中的應(yīng)用也不會(huì)少真竖。。详幽。今天我就來介紹一個(gè)項(xiàng)目中筛欢,我用到的。react-native-image-picker這個(gè)控件唇聘,git地址
先來看展示效果版姑,
圖片的效果是我沒有加入接口的效果。如果加入接口迟郎,我用的是base64剥险,之后會(huì)返回一個(gè)服務(wù)器端的filrUrl。
當(dāng)然java同樣可以實(shí)現(xiàn)批量上傳的效果宪肖。
首先表制,我們先看下環(huán)境配置
詳細(xì)的見官網(wǎng),更完善控乾。
在IOS端么介。-》
In the XCode's "Project navigator", right click on your project's Libraries folder ? Add Files to <...>
Go to node_modules ? react-native-image-picker ? ios ? select RNImagePicker.xcodeproj
Add RNImagePicker.a to Build Phases -> Link Binary With Libraries
For iOS 10+, Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, and NSMicrophoneUsageDescription (if allowing video) keys to your Info.plist with strings describing why your app needs these permissions. Note: You will get a SIGABRT crash if you don't complete this step
Compile and have fun
之后就是使用了。
首先必須定義全局的一些變量在項(xiàng)目里 ?我定義的是
之后調(diào)用相機(jī)的方法是:
我在方法里使用了項(xiàng)目的接口蜕衡。返回一個(gè)服務(wù)器端的url壤短。作為Image 的url展示出來。
react-native-image-picker的屬性還有很多,方法也有多種久脯。在這里注重的是環(huán)境的配置纳胧,以及對(duì)組件的深入研究。這里記錄下來帘撰,方便以后參考跑慕。