Saat ini saya menggunakan react-native-camera sebagai perpustakaan untuk mengambil gambar. Saya berhasil menampilkan dan menyembunyikan satu-satunya komponen kamera tergantung pada keadaan tertentu. Saya sedang mengerjakan aplikasi yang memiliki banyak tombol untuk mengambil gambar, misalnya:

  • Tombol A (tampilkan kamera -> ambil gambar -> simpan nilai pada keadaan lokal A)
  • Tombol B (tampilkan kamera -> ambil gambar -> simpan nilai pada keadaan lokal B)
  • Tombol C (tampilkan kamera -> ambil gambar -> simpan nilai pada keadaan lokal C)

Saya telah memecahkan kepala saya tentang bagaimana melakukan ini, tetapi tidak dapat mengetahuinya.

Kode saya adalah sebagai berikut:

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
gangrelg 19 Maret 2019, 08:17

1 menjawab

Jawaban Terbaik

Saya akan menggunakan status untuk membedakan "kamera" mana yang Anda gunakan.

Status awal Anda:

this.state = {
  isVisible: false,
  pictureType: null,
  value1: null,
  value2: null
}

Fungsi untuk memanggil saat tombol dipanggil, di mana setiap tombol memiliki pictureType yang berbeda:

initTakingPicture = (pictureType) => {
  this.setState({
    isVisible: true,
    pictureType: pictureType
  })
}

Tombol contoh Anda:

<Button title='PHOTO 1' onPress={() => this.initTakingPicture("A")}/>

Kemudian dalam fungsi takePicture Anda, Anda dapat memeriksa status untuk membedakan jenis gambar yang Anda ambil dan menyimpannya ke dalam bidang yang sesuai:

  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
      });
    }
  };
1
gbalduzzi 19 Maret 2019, 14:51