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

Posted 2023-03-11

【中文标题】渲染两个 RNCamera 组件时反应原生应用程序给出空白屏幕

【英文标题】：React native app giving blank screen when rendering two RNCamera components

【发布时间】：2020-02-15 09:57:12

【问题描述】：

我正在尝试在一个屏幕中使用两个 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>

【参考方案1】：

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

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

【讨论】：

谢谢，但根据 fork 上的文档，我没有任何运气来实现这一点。如果你已经实现了这个，你能分享一下你是怎么做到的吗？