2

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

这是刷卡代码：

<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>

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

4

1 回答 1

2

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

我通过使 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>
于 2017-06-13T16:58:12.590 回答