javascript - React Native 相机 - 多张照片
问题描述
我目前正在使用 react-native-camera 作为库来拍照。我设法根据特定状态显示和隐藏一个唯一的相机组件。我正在开发一个有多个按钮来拍照的应用程序,例如:
- 按钮 A(显示相机 -> 拍照 -> 在本地状态 A 上存储值)
- 按钮 B(显示相机 -> 拍照 -> 在本地状态 B 上存储值)
- 按钮 C(显示相机 -> 拍照 -> 在本地状态 C 上存储值)
我一直在想如何做到这一点,但无法弄清楚。
我的代码如下:
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,
},
});
解决方案
我会使用状态来区分您使用的是哪个“相机”。
你的初始状态:
this.state = {
isVisible: false,
pictureType: null,
value1: null,
value2: null
}
调用按钮时调用的函数,其中每个按钮都有不同的pictureType
:
initTakingPicture = (pictureType) => {
this.setState({
isVisible: true,
pictureType: pictureType
})
}
您的示例按钮:
<Button title='PHOTO 1' onPress={() => this.initTakingPicture("A")}/>
然后在您的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
});
}
};
推荐阅读
- python - Python。如何将我自己的数据集导入“k 均值”算法
- java - 如何将 POJO 转换为 Map
发电机分贝? - php - PHP数组如何检查其他数组中是否存在所有数组值
- javascript - 带百分比的虚线圆形条
- datetime - 如何从 LocalDateTime 获取 ZoneOffset
- dart - 如何在类/有状态小部件之外调用 setState?
- javascript - 使用 chart.js 的 3 个数据集并非所有数据都可见
- python - 如何使用 QGraphicsScene 正确显示 QChart?
- spring-cloud-dataflow - scdf 1.7.3 docker k8s 函数运行器无法启动
- databricks - 数据砖集群每次启动时都会安装所有包