android - 多相机组件 react-native-camera

我有一个应用程序，有三个屏幕，您可以在其中左右滑动以转到其他屏幕。每个屏幕都应该有一个摄像头作为背景和一些按钮。当我使用 react-native-camera 的相机组件时。它适用于单屏。但是当在所有三个 View 中都包含相机组件时。屏幕变白。

这里是刷卡代码:

<Swiper showsPagination={false} loop={false} index={1}>
    <MessageSection/>
    <honeSection/>
    <DocumentSection/>
  </Swiper>

这里是phoneSection:

<Camera
      ref={(cam) => {
        this.camera = cam;
      }}
      style={global.COMMON.container}
      aspect={Camera.constants.Aspect.fill}>
    <View style={[global.COMMON.container, {backgroundColor: 'transparent'}]}>
      {backButton}
      <View style={global.COMMON.centerView}>
        <Animatable.Text animation="fadeOut" delay={2000} style={[global.COMMON.centerText, {color: 'white'}]}>lace a call to Contacts and Service Providers</Animatable.Text>
      </View>
      <View style={global.COMMON.bottomSection}>
        {buttonSection}
      </View>
    </View>
  </Camera>

代码在其他组件中看起来也相似。但是一旦我使用了多个相机组件。相机不工作，只显示白屏。

---

Best Answer-推荐答案

找到了解决这个问题的方法。诀窍是使用单个相机组件而不是三个。

我通过将 Camera 组件作为我的主要组件并在其中添加 swiper 组件来解决了这个问题。因此，其他一切都在相机之上。这使您可以在其上创建任何东西。

<Camera
      ref={(cam) => {
        this.camera = cam;
      }}
      style={global.COMMON.container}
      aspect={Camera.constants.Aspect.fill}>
  <Swiper showsPagination={false} loop={false} index={1}>
    <MessageSection/>
    <honeSection/>
    <DocumentSection/>
  </Swiper>
</Camera>

关于android - 多相机组件 react-native-camera，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44203638/