多摄像头组件 react-native-camera
Multiple Camera Component react-native-camera
我有一个应用程序,有三个屏幕,您可以在其中左右滑动以转到其他屏幕。每个屏幕都应该有一个摄像头作为背景和一些按钮。当我使用 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>
该代码在其他组件中看起来也相似。但是一旦我使用了不止一个相机组件。摄像头不工作,只显示白屏。
已找到解决此问题的方法。诀窍是使用单个摄像头组件而不是三个。
我通过将 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>
我有一个应用程序,有三个屏幕,您可以在其中左右滑动以转到其他屏幕。每个屏幕都应该有一个摄像头作为背景和一些按钮。当我使用 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>
该代码在其他组件中看起来也相似。但是一旦我使用了不止一个相机组件。摄像头不工作,只显示白屏。
已找到解决此问题的方法。诀窍是使用单个摄像头组件而不是三个。
我通过将 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>