react-native-image-picker的github官網(wǎng)
react native 之 react-native-image-picke的詳細(xì)使用圖解
運行yarn add react-native-image-picker安裝到項目運行依賴，此時調(diào)試可能會報錯库北，如果報錯潘靖，需要使用下面的步驟解決：
運行react-native link自動注冊相關(guān)的組件到原生配置中
-
打開項目中的android->app->src->main->AndroidManifest.xml文件瞬铸，在第8行添加如下配置：
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> -
打開項目中的android->app->src->main->java->com->當(dāng)前項目名稱文件夾->MainActivity.java文件扔役，修改配置如下：
package com.native_camera; import com.facebook.react.ReactActivity; // 1. 添加以下兩行： import com.imagepicker.permissions.OnImagePickerPermissionsCallback; // <- add this import import com.facebook.react.modules.core.PermissionListener; // <- add this import public class MainActivity extends ReactActivity { // 2. 添加如下一行： private PermissionListener listener; // <- add this attribute /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "native_camera"; } } -
在項目中添加如下代碼：
// 第1步： import {View, Button, Image} from 'react-native' import ImagePicker from 'react-native-image-picker' var photoOptions = { //底部彈出框選項 title: '請選擇', cancelButtonTitle: '取消', takePhotoButtonTitle: '拍照', chooseFromLibraryButtonTitle: '選擇相冊', quality: 0.75, allowsEditing: true, noData: false, storageOptions: { skipBackup: true, path: 'images' } } // 第2步： constructor(props) { super(props); this.state = { imgURL: '' } } // 第3步： <Image source={{ uri: this.state.imgURL }} style={{ width: 200, height: 200 }}></Image> <Button title="拍照" onPress={this.cameraAction}></Button> // 第4步： cameraAction = () => { ImagePicker.showImagePicker(photoOptions, (response) => { console.log('response' + response); if (response.didCancel) { return } this.setState({ imgURL: response.uri }); }) } 一定要退出之前調(diào)試的App，并重新運行react-native run-android進(jìn)行打包部署祸憋；這次打包期間會下載一些jar的包仆葡，需要耐心等待！
