React Native的照相机和图片
React Native的照相机和图片
4，最后在MainApplication.Java文件中添加如下代码：
import com.imagepicker.ImagePickerPackage;
new ImagePickerPackage()
react-native-image-picker
如果要实现多个图像选择，裁剪，压缩等功能需要 react-native-image-crop-picker
安装
yarn add react-native-image-picker react-native link
环境配置
1.android
1，在android/settings.gradle文件中添加如下代码：
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')
2，在android/app/build.gradle文件的dependencies中添加如下代码：
compile project(':react-native-image-picker')
compile project(':react-native-image-picker')
3，在AndroidManifest.xml文件中添加权限：
4，最后在MainApplication.Java文件中添加如下代码：
import com.imagepicker.ImagePickerPackage;
new ImagePickerPackage()
属性
完整的代码
import ImagePicker from 'react-native-image-picker';
import {
Platform,
StyleSheet,
Text,
View,
PixelRatio,
TouchableOpacity,
Image, } from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
state = { avatarSource: null, videoSource: null };
//选择图片
selectPhotoTapped() {
const options = {
title: '选择图片', //标题
cancelButtonTitle: '取消',//取消按钮
takePhotoButtonTitle: '拍照', //拍照按钮
chooseFromLibraryButtonTitle: '选择照片',//从图库选择图片
customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'},],//自定义按钮
cameraType: 'back', //类型 'front' or 'back'
mediaType: 'photo',//图片或视频 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android
videoQuality: 'high', //视频质量
durationLimit: 10, //最大视频录制时间
maxWidth: 300, //图片最大宽度
maxHeight: 300,//图片最大高度
quality: 0.8,//图片质量
angle: 0, //
allowsEditing: false,//是否可以编辑
noData: false, //如果true 则禁用data生成的base64字段，（极大地提升图片的性能）
storageOptions: { skipBackup: true } //如果为true该照片不会备份到iCloud
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({ avatarSource: source });
}
});
}
//选择视频
selectVideoTapped() {
const options = {
title: '选择视频',
cancelButtonTitle: '取消',
takePhotoButtonTitle: '录制视频',
chooseFromLibraryButtonTitle: '选择视频',
mediaType: 'video', videoQuality: 'medium'
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled video picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
this.setState({ videoSource: response.uri });
}
});
}
render() {
return (
{ this.state.avatarSource === null ?
选择照片 :
选择视频
{
this.state.videoSource &&
{this.state.videoSource}
}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF' },
avatarContainer: {
borderColor: '#9B9B9B',
borderWidth: 1 / PixelRatio.get(),
justifyContent: 'center',
alignItems: 'center' },
avatar: {
borderRadius: 50,
width: 100,
height: 100 }
});