[英]React Native Camera - Multiple Photos
I am currently using react-native-camera as a library to take pictures.我目前使用 react-native-camera 作为库来拍照。 I managed to show and hide a one and only camera component depending on a specific state.
我设法根据特定状态显示和隐藏一个且唯一的相机组件。 I am working on an app that has multiple buttons to take a picture, for example:
我正在开发一个有多个按钮来拍照的应用程序,例如:
I have been breaking my head on how to do this, but can't figure it out.我一直在思考如何做到这一点,但无法弄清楚。
My code is the following:我的代码如下:
import React, { Component } from 'react'; import { StyleSheet, Text, TouchableOpacity, View, Button } from 'react-native'; import { RNCamera } from 'react-native-camera'; export default class BadInstagramCloneApp extends Component { constructor(props){ super(props); this.state = { isVisible: false, value1: null, value2: null } } render() { return ( <View style={styles.subcontainer}> {this.state.isVisible === true ? <View style={styles.container}> <RNCamera ref={ref => { this.camera = ref; }} style={styles.preview} type={RNCamera.Constants.Type.back} flashMode={RNCamera.Constants.FlashMode.on} permissionDialogTitle={'Permission to use camera'} permissionDialogMessage={'We need your permission to use your camera phone'} onGoogleVisionBarcodesDetected={({ barcodes }) => { console.log(barcodes); }} /> <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}> <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}> <Text style={{ fontSize: 14 }}> SNAP </Text> </TouchableOpacity> </View> </View> : <View> <Button title='PHOTO 1' onPress={this.changeState}/> <Button title='PHOTO 2' onPress={this.changeState2}/> <Button title='SHOW RESULTS' onPress={this.showResults}/> </View> } </View> ); } changeState = () =>{ this.setState({isVisible: true}) } changeState2 = () =>{ this.setState({isVisible: true}) } showResults = () => { console.log('VALUE1: ' + this.state.value1); console.log('VALUE2: ' + this.state.value2); } takePicture = async function() { if (this.camera) { const options = { quality: 0.5, base64: true }; const data = await this.camera.takePictureAsync(options); console.log(data.uri); this.setState({isVisible: false}); } }; } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: 'black' }, subcontainer: { flex: 1, flexDirection: 'column', }, preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', }, capture: { flex: 0, backgroundColor: '#fff', borderRadius: 5, padding: 15, paddingHorizontal: 20, alignSelf: 'center', margin: 20, }, });
I would use the state to distinguish which "camera" you are using.我会使用状态来区分您使用的是哪个“相机”。
Your initial state:您的初始状态:
this.state = {
isVisible: false,
pictureType: null,
value1: null,
value2: null
}
The function to call when a button is called, where each button has a different pictureType
:调用按钮时调用的函数,其中每个按钮具有不同的
pictureType
:
initTakingPicture = (pictureType) => {
this.setState({
isVisible: true,
pictureType: pictureType
})
}
Your example button:您的示例按钮:
<Button title='PHOTO 1' onPress={() => this.initTakingPicture("A")}/>
Then in your takePicture
function you can check the state to distinguish which type of picture you are taking and save it into the according field:然后在您的
takePicture
函数中,您可以检查状态以区分您正在拍摄的照片类型并将其保存到相应的字段中:
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);
let fieldToSave = "value1" // Fallback
if (this.state.pictureType === "A") {
// Operation you need to do for pictureType A
fieldToSave = "value1"
} else if (this.state.pictureType === "B") {
// Operation you need to do for pictureType B
fieldToSave = "value2"
}
this.setState({
isVisible: false,
pictureType: null,
[fieldToSave]: data.uri
});
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.