React Native - 在相同應用程序中使用兩個React-Native-Camera組件導致問題？

我在我的React Native應用程序中兩次使用react-native-camera組件。我有一個<CameraFront/>組件和<CameraBack/>組件。它們分別位於不同的文件CameraFront.js和CameraBack.js中。只是fyi <CameraFront/>拍攝了該產品正面的照片，<CameraBack/>拍攝了該產品背面的照片。它們不涉及前置攝像頭或後置攝像頭。React Native - 在相同應用程序中使用兩個React-Native-Camera組件導致問題？

問題是，當我嘗試從<CameraBack/>組件拍攝照片時，它實際上是從<CameraFront/>組件運行takePicture()功能。不知道爲什麼會發生這種情況。您會在<CameraBack/>組件中看到我註釋掉takePicture()函數中的所有代碼，並在<CameraFront/>組件中拋出console.log()。即使我在<CameraBack/>組件中，<CameraFront/>組件中的console.log也會運行。這導致了一堆奇怪的事情發生，比如在其他一些事情中被重寫的狀態被覆蓋。

任何想法？我只是不確定<CameraBack/>組件中的takePicture()函數如何能夠訪問其他組件中的函數？

CameraFront.js

import React, { PropTypes, Component } from 'react'; 
import { 
    Dimensions, 
    StyleSheet, 
    Text, 
    Button, 
    TouchableHighlight, 
    View, 
    Alert 
} from 'react-native'; 
import { connect } from 'react-redux' 
import Camera from 'react-native-camera' 
import { getImageFront } from '~/redux/modules/camera' 

class CameraFront extends Component { 
    static propTypes = { 
    dispatch: PropTypes.func.isRequired, 
    navigator: PropTypes.object.isRequired 
    } 
    componentDidMount() { 
    Alert.alert(
     'Front Image', 
     'Snap a picture of the front of the product.', 
     [{ text: 'Ok', onPress:() => console.log('Ok pressed')}] 
    ) 
    } 
    render() { 
     return (
     <View style={styles.container}> 
      <Camera 
      ref={(cam) => { 
       this.camera = cam; 
      }} 
      style={styles.preview} 
      aspect={Camera.constants.Aspect.fill} 
      captureTarget={Camera.constants.CaptureTarget.disk}> 
      <Button style={{marginBottom: 40, height: 50, padding: 10}} 
       onPress={this.takePicture.bind(this)} 
       title="Capture" /> 
      </Camera> 
     </View> 
    ); 
    } 

    takePicture() { 
    this.camera.capture() 
     .then((data) => { 
     this.props.dispatch(getImageFront(data.path)) 
     console.log('function is being run in camera front instead') 
     // Push to Preview component 
     this.props.navigator.push({ 
     previewFront: true 
     }) 
     }) 
     .catch(err => console.error(err)); 
    } 
} 

export default connect()(CameraFront)

CameraBack.js

import React, { PropTypes, Component } from 'react'; 
import { 
    Dimensions, 
    StyleSheet, 
    Text, 
    Button, 
    TouchableHighlight, 
    View, 
    Alert 
} from 'react-native'; 
import { connect } from 'react-redux' 
import Camera from 'react-native-camera' 
import { getImageBack } from '~/redux/modules/camera' 

class CameraBack extends Component { 
    static propTypes = { 
    dispatch: PropTypes.func.isRequired, 
    navigator: PropTypes.object.isRequired 
    } 
    componentDidMount() { 
    Alert.alert(
     'Back Image', 
     'Snap a picture of the back of the product.', 
     [{ text: 'Ok', onPress:() => console.log('Ok pressed')}] 
    ) 
    } 
    render() { 
     return (
     <View style={styles.container}> 
      <Camera 
      ref={(cam) => { 
       this.camera = cam; 
      }} 
      style={styles.preview} 
      aspect={Camera.constants.Aspect.fill} 
      captureTarget={Camera.constants.CaptureTarget.disk} 
      > 
      <Button style={{marginBottom: 40, height: 50, padding: 10}} 
       onPress={this.takePicture.bind(this)} 
       title="Capture" /> 
      </Camera> 
     </View> 
    ); 
    } 

    takePicture() { 
    /* 
    this.camera.capture() 
     .then((data) => { 
     this.props.dispatch(getImageBack(data.path)) 
     console.log(this.props.dispatch(getImageBack(data.path))) 
     this.props.navigator.push({ 
      previewBack: true 
     }) 
     }) 
     .catch(err => console.error(err)); 
    */ 
    } 

} 

export default connect()(CameraBack)

來源

2017-03-23 maxwellgover

據我所知反應原生相機提供Camera.constants.Type.back或Camera.constants.Type.front無論是在兩個不同的組件，這樣寫同樣的事情不你需要做的只是切換捕捉屏幕中的圖標，以便從後到前更換相機，並讓第三方處理。

您需要做的是將通用索引指向您的通用組件，例如當您想打開前置攝像頭時需要index:1，當您想要打開後置攝像頭時需要index: 0。

在您的構造函數中進行檢查，如果您的索引爲零，則僅打開相機和其他前置相機。

var typeOfCamera 
if(!index) 
typeOfCamera = Camera.constants.Type.back 
else 
typeOfCamera = Camera.constants.Type.front 

this.state = { 
     camera: { 
     aspect: Camera.constants.Aspect.fill, 
     captureTarget: Camera.constants.CaptureTarget.cameraRoll, 
     type: typeOfCamera, 
     orientation: Camera.constants.Orientation.auto, 
     flashMode: Camera.constants.FlashMode.auto, 
     }

乾杯:)

來源

2017-03-23 20:34:19 Codesingh

謝謝，但CameraFront和CameraBack不是指前面板與後置攝像。 CameraFront表示拍攝產品正面的照片，CameraBack拍攝產品背面的照片，但都使用背面照相機拍攝照片。我可能應該指定這一點。 – maxwellgover

React Native - 在相同應用程序中使用兩個React-Native-Camera組件導致問題？

回答

相關問題