Question

我在React Native应用程序中两次使用react-native-camera组件。我有一个<CameraFront/>组件和一个<CameraBack/>组件。它们分别位于不同的文件CameraFront.js和CameraBack.js中。只需fyi <CameraFront/>拍摄产品正面的照片，<CameraBack/>拍摄产品背面的照片。它们不是指前置摄像头或后置摄像头。

问题是，当我尝试从<CameraBack/>组件拍照时，它实际上是从takePicture()组件运行<CameraFront/>函数。不知道为什么会这样。您会在<CameraBack/>组件中看到我注释掉takePicture()函数中的所有代码，并在console.log()组件中抛出<CameraFront/>。即使我在console.log组件中，<CameraFront/>组件中的<CameraBack/>也会运行。这导致了一些奇怪的事情发生，就像还原状态被其他一些东西覆盖一样。

有什么想法吗？我只是不确定takePicture()组件中的<CameraBack/>函数如何能够访问其他组件中的函数？

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)

Answer 1

据我所知，react-native-camera提供Camera.constants.Type.back或Camera.constants.Type.front两者，所以在两个不同的组件中写相同的东西并没有任何意义，你需要做的只是切换图标在您的捕捉屏幕中，将摄像机从后向前更换，并让第三方进行休息。

您需要做的是将索引传递给您的公共组件，例如{J}要打开前置摄像头时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,
      }

干杯：）

React Native - 在同一应用程序中使用两个React-Native-Camera组件导致问题？

1 个答案: