我正在使用带有本机的react-native相机。我想在单击按钮时打开react-native-camera。我怎样才能做到这一点?我有一个takepic函数,我试图在其中渲染一个相机组件。返回时,我有一个按钮,该按钮正在调用takePic函数,该函数中包含一个摄像头组件。我不确定这是否是正确的方法
import React, { useState, Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Button } from 'react-native';
import { RNCamera } from 'react-native-camera';
class UploadDocuments extends Component {
takePicture = async function(camera) {
const options = { quality: 0.5, base64: true };
const data = await camera.takePictureAsync(options);
console.log(data.uri);
})
};
takePic =() => {
return(
<View style={styles.container}>
<RNCamera
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
>
{({ camera, status, recordAudioPermissionStatus }) => {
if (status !== 'READY') return <PendingView />;
return (
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity onPress={() => this.takePicture(camera)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> SNAP </Text>
</TouchableOpacity>
</View>
);
}}
</RNCamera>
</View>
)
}
render() {
return (
<TouchableOpacity>
<Button
onPress={this.takePic}
title="Learn More"
color="#841584"
/>
</TouchableOpacity>
)
}
}
export default UploadDocuments