複数のカメラコンポーネントreact-native-camera

Question

3つの画面を持つアプリがあり、左右にスワイプして他の画面に移動できます。各画面には背景といくつかのボタンとしてのカメラが必要です。私は反応ネイティブカメラのカメラコンポーネントを使用するとき。これは、単一の画面に最適です。しかし、3つすべてのビューにカメラコンポーネントを含める場合。画面が白くなります。ここで

はSwiperコード：

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

コードは、他のコンポーネントで似ています。しかし、一度私は複数のカメラコンポーネントを使用します。カメラは機能しません。白い画面のみを表示します。

Answer 1

この問題の解決策が見つかりました。このトリックは、3つではなく1つのカメラコンポーネントを使用することです。

カメラコンポーネントをメインコンポーネントにして、内部にスワイパコンポーネントを追加することで、この問題を解決しました。だから、他のすべてがカメラの上にある。あなたはそれの上に何かを作成することができます。

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