React-Native TabNavigator with camera（カメラは常にオン）

Question

私はTabNavigatorカメラを持っています。 コード例：

マイindex.android.js

const MainNavigator = TabNavigator({ 
    Home: { screen: QRcreatorScreen }, 
    Contacts: { screen: ContactsScreen }, 
    Camera: { screen: CameraScreen }, 
    Profile: { screen: ProfileScreen }, 
    }, { 
    tabBarPosition: 'bottom', 
    lazy: true 
}); 

と私のカメラのページ：

export default class CameraScreen extends React.Component { 

    static navigationOptions = { 
    title: 'Camera', 
    }; 

    emitContact() { 
    alert("Contact been added"); 
    } 

    render() { 
    return (
     <QRCodeScanner onRead={(e) => { 
           SetNewContact(e.data,() => { this.emitContact() }) 
          }} 
      topContent={<Text>Just show me another code</Text>} 
      showMarker={true} 
      bottomContent={(
       <TouchableOpacity style={styles.buttonTouchable}> 
        <Text style={styles.buttonText} 
          onPress={() => this.props.navigation.dispatch(resetAction) }>OK. Got it! 
        </Text> 
       </TouchableOpacity> 
      )} 
     /> 
    ); 
    }; 
} 

単にQRコードリーダー。

問題は次のとおりです。TabNavigatorオプションが設定されている場合、lazy == false、TabNavigatorは、アプリケーションの起動時にすべてのシーンをレンダリングします。

lazy == trueの場合、呼び出されるシーンはレンダリングされますが、最後のシーン（このケースではProfile）を呼び出すと、その前にあるすべてのシーンもレンダリングされます。

私はProfileをタップすると、すべてのシーンを読み込むのに時間が必要となり、アプリのパフォーマンスが悪いです。

カメラのページをレンダリングするときに、レンダリングする必要があるのは何ですか？

もう1つの質問：私たちはカメラのシーンを離れるとき、カメラはまだ動作している、私はシーンを離れるときに私はそれをオフにすることができますか？

私は、私は答えを見つけた誰かのために興味深いがある場合react-native-camera: ^0.10.0

Answer 1

を使用しているパッケージreact-native-qrcode-scannerを使用しています。

私はとネイティブStackNavigatorを使用しています。我々は状態his.state.selectedTabを得ることができ、それは私の場合には「カメラ」でない場合、我々は送信react-native-tab-navigatorで

componentDidMount() { 
    event.addListener('cameraUnpressed',() => { 
     this.setState({showScanner: false}) 
    }); 
    event.addListener('camera',() => { 
     this.setState({showScanner: true}) 
    });  
    } 

：私はカメラを閉じる方法

：とき

render() { 
    let QrScanner = this.state.showScanner ? <QrScannerElement navigation={this.props.navigation}/> : null 
    return (
     <View style={styles.container}> 
     {QrScanner}  
     </View> 
    ); 
    }; 

は状態を変更するには、アクティブであります行事。

私の例：

cameraPressed() { 
    this.setState({ selectedTab: 'camera' }); 
    event.emit('camera'); 
    } 

    cameraUnPressed(page) { 
    if(this.state.selectedTab == 'camera') event.emit('cameraUnpressed'); 
    this.setState({ selectedTab: page }); 
    }