React Native Camera - 多張照片

Question

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

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