React Native學習－調取網路攝影機第三方組件：react-native-image-picker

標籤：

近期做的軟體中圖片處理是重點，那麼自然也就用到了相機照相或者相簿選取照片的功能。

react-native中有image-picker這個第三方組件，但是0.18.10這個版本還不是太支援iPad。

這個組件同時支援photo和video，也就是照片和視頻都可以用這個組件實現。

安裝 npm install --save react-native-image-picker

安裝過之後要執行rnpm link命令

用法

import ImagePickerManager from ‘NativeModules‘;  當你想展示相機還是相簿這個選取器時：（變數options還有其它的設定，一些使用它的預設值就可以滿足我們的要求，以下是我使用到的）var options = { title: ‘Select Avatar‘, // 選取器的標題，可以設定為空白來不顯示標題 cancelButtonTitle: ‘Cancel‘, takePhotoButtonTitle: ‘Take Photo...‘, // 調取網路攝影機的按鈕，可以設定為空白使使用者不可選擇拍照 chooseFromLibraryButtonTitle: ‘Choose from Library...‘, // 調取相簿的按鈕，可以設定為空白使使用者不可選擇相簿照片 customButtons: { ‘Choose Photo from Facebook‘: ‘fb‘, // [按鈕文字] : [當選擇這個按鈕時返回的字串] }, mediaType: ‘photo‘, // ‘photo‘ or ‘video‘ videoQuality: ‘high‘, // ‘low‘, ‘medium‘, or ‘high‘ durationLimit: 10, // video recording max time in seconds maxWidth: 100, // photos only預設為手機螢幕的寬，高與寬一樣，為正方形照片 maxHeight: 100, // photos only allowsEditing: false, // 當使用者選擇過照片之後是否允許再次編輯圖片}; ImagePickerManager.showImagePicker(options, (response) => { console.log(‘Response = ‘, response); if (response.didCancel) { console.log(‘User cancelled image picker‘); } else if (response.error) { console.log(‘ImagePickerManager Error: ‘, response.error); } else if (response.customButton) { // 這是當使用者選擇customButtons自訂的按鈕時，才執行 console.log(‘User tapped custom button: ‘, response.customButton); } else { // You can display the image using either data: if (Platform.OS === ‘android‘) { source = {uri: response.uri, isStatic: true}; } else { source = { uri: response.uri.replace(‘file://‘, ‘‘), isStatic: true }; } this.setState({ avatarSource: source }); }});

 

顯示圖片的方法：

<Image source={this.state.avatarSource} style={styles.uploadAvatar} />

當然我們也有不想讓使用者選擇的時候，而是直接就調用相機或者相簿，這個組件中還有其它的函數：

// Launch Camera: ImagePickerManager.ImagePickerManager.launchCamera(options, (response) => { // Same code as in above section! }); // Open Image Library: ImagePickerManager.ImagePickerManager.launchImageLibrary(options, (response) => { // Same code as in above section! });

 

更詳細的可以查看它的官網：https://github.com/marcshilling/react-native-image-picker

這個組件只支援從相簿中選取一張圖片，如果滿足不了需求，可以先學習瞭解一下官方版react-native的demo：裡邊有CameraRoll可以支援從相簿中擷取多張圖片。

 

React Native學習－調取網路攝影機第三方組件：react-native-image-picker