第一步 :
在 android/app/src/main/AndroidManifest.xml
添加<uses-permission android:name="android.permission.CAMERA"/>
然后运行项目在手机应用权限哪里查看
这是添加前的
这是添加后的
第二步调用
import React, {Component} from 'react';
import {
View,
Text,
Image,
StyleSheet,
Button,
Modal,
TouchableHighlight,
TouchableOpacity,
Dimensions
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
// const Dimensions = require ('Dimensions') ;
export default class Jidan extends Component {
state={
avatarSource: {},
}
// 选择图片或相册
onClickChoosePicture = () => {
const options = {
title: '',
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '选择照片',
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};
this.setState({
avatarSource: source,
});
console.warn(this.state.avatarSource.uri);
}
});
}
async requestCarmeraPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
'title': 'Camera Permission',
'message': 'the project needs access to your camera ' +
'so you can take awesome pictures.'
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
this.show("你已获取了相机权限")
} else {
this.show("获取相机失败")
}
} catch (err) {
this.show(err.toString())
}
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button_view}
onPress={this.requestCarmeraPermission.bind(this)}>
<Text style={styles.button_text}>申请相机权限</Text>
</TouchableOpacity>
<Text style={styles.textStyle} onPress={() => this.onClickChoosePicture()}>选择图片</Text>
<Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
</View>
);
}
}
const styles = StyleSheet.create({
button_view: {
margin:4,
borderRadius: 4,
backgroundColor: '#8d4dfc',
alignItems: 'center',
},
button_text: {
padding: 6,
fontSize: 16,
fontWeight: '600'
},
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
marginBottom:60,
},
textStyle:{
backgroundColor:'#66CCFF',
paddingHorizontal:50,
paddingVertical:10,
},
uploadAvatar:{
width: 150,
height: 150,
}
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。