标签:dia esc false height dep 添加 title image you
react-native-image-picker组件可以从相册、相机或本地目录选取图片。
我使用的版本
"dependencies": { "react": "16.8.1", "react-native": "0.61.2", "react-native-image-picker": "2.3.4" }
yarn add react-native-image-picker@0.61.2
在 AndroidManifest.xml 添加权限
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
cd ios && pod install
修改 Info.plist 添加权限描述
<plist version="1.0"> <dict> ... <key>NSPhotoLibraryUsageDescription</key> <string>$(PRODUCT_NAME) would like access to your photo gallery</string> <key>NSCameraUsageDescription</key> <string>$(PRODUCT_NAME) would like to use your camera</string> <key>NSPhotoLibraryAddUsageDescription</key> <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string> <key>NSMicrophoneUsageDescription</key> <string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string> </dict> </plist>
import ImagePicker from ‘react-native-image-picker‘;
const options = { title: ‘选择图片‘, cancelButtonTitle: ‘取消‘, takePhotoButtonTitle: ‘拍照‘, chooseFromLibraryButtonTitle: ‘图片库‘, cameraType: ‘back‘, mediaType: ‘photo‘, videoQuality: ‘high‘, durationLimit: 10, maxWidth: 600, maxHeight: 600, aspectX: 2, aspectY: 1, quality: 0.8, angle: 0, allowsEditing: false, noData: false, storageOptions: { skipBackup: true, path: ‘images‘ } }; ImagePicker.showImagePicker(options, (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 { const source = { uri: response.uri }; console.log(source) // You can also display the image using data: // const source = { uri: ‘data:image/jpeg;base64,‘ + response.data }; this.setState({ avatarSource: source, }); } });
官方文档https://github.com/react-native-image-picker/react-native-image-picker/blob/v2.3.4/docs/Install.md
ReactNative 0.6x 使用react-native-image-picker
标签:dia esc false height dep 添加 title image you
原文地址:https://www.cnblogs.com/dch0/p/14363193.html