2017-05-26 59 views
1

我有一個應用程序,與三個屏幕,在那裏你可以左右滑動去其他屏幕。每個屏幕應該有一個相機作爲背景和一些按鈕。當我使用react-native-camera的相機組件時。它適用於單屏幕。但是,在所有三個視圖中包含相機組件時。屏幕變白。多個相機組件反應本機相機

這裏是組隊,探索該代碼:

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

使代碼在其他組件類似的爲好。但是,一旦我使用多個相機組件。相機不起作用,只顯示白色屏幕。

回答

0

找到了解決這個問題的辦法。訣竅是使用單個相機組件而不是三個。

我通過將相機組件作爲我的主要組件並在其中添加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>