Question

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

以下是Swiper代码：

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

这是电话部分：

<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'}]}>Place a call to Contacts and Service Providers</Animatable.Text>
      </View>
      <View style={global.COMMON.bottomSection}>
        {buttonSection}
      </View>
    </View>
  </Camera>

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

Answer 1

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

我通过将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/>
    <PhoneSection/>
    <DocumentSection/>
  </Swiper>
</Camera>

多个相机组件反应原生相机

1 个答案: