React Native 相机 - 多张照片

Posted 2023-03-11

【中文标题】React Native 相机 - 多张照片

【英文标题】：React Native Camera - Multiple Photos

【发布时间】：2019-03-19 05:17:20

【问题描述】：

我目前正在使用 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,
  ,
);

【参考方案1】：

我会使用状态来区分您使用的是哪个“相机”。

你的初始状态：

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
      );
    
  ;

【讨论】：

像魅力一样工作！