渲染两个 RNCamera 组件时反应原生应用程序给出空白屏幕

Question

我正在尝试在一个屏幕中使用两个 RNCamera 组件，以便每个组件占据屏幕的一半，并且我可以同时显示后置和前置摄像头。

但不幸的是，当我添加第二个 RNCamera 组件时，该应用程序只会显示一个空白屏幕。有人可以帮我解决这个问题吗？

下面是我的代码。

<View style={styles.container}>
        <View style={{ flex: 1 }}>
          <RNCamera
            ref={ref => {
              this.camera1 = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.off}
            androidCameraPermissionOptions={{
              title: 'Permission to use camera',
              message: 'We need your permission to use your camera',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            androidRecordAudioPermissionOptions={{
              title: 'Permission to use audio recording',
              message: 'We need your permission to use your audio',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes);
            }}
          />
        </View>
        <View style={{ flex: 1 }}>
          <RNCamera
            ref={ref => {
              this.camera2 = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.off}
            androidCameraPermissionOptions={{
              title: 'Permission to use camera',
              message: 'We need your permission to use your camera',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            androidRecordAudioPermissionOptions={{
              title: 'Permission to use audio recording',
              message: 'We need your permission to use your audio',
              buttonPositive: 'Ok',
              buttonNegative: 'Cancel',
            }}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes);
            }}
          />
        </View>
        <View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'yellow', justifyContent: 'center' }}>
          <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
            <Text style={{ fontSize: 14 }}> SNAP </Text>
          </TouchableOpacity>
        </View>

Answer 1

我在一个视图中使用两个相机实例时遇到了同样的问题。事实证明 react-native-camera 的实现不支持它。所以我发现的唯一选择是使用来自github的fork

这是一个issue，对这个案例有很好的解释。