近期做的软件中图片处理是重点,那么自然也就用到了相机照相或者相册选取照片的功能。
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可以支持从相册中获取多张图片。
时间: 2024-11-07 15:22:04