React-Native TabNavigator avec caméra (appareil photo est toujours allumé)

Question

J'ai TabNavigator avec caméra à l'intérieur. Exemple de code:

Mes index.android.js

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

et ma page de la caméra:

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> 
      )} 
     /> 
    ); 
    }; 
} 

Tout simplement lecteur de code QR.

Le problème est le suivant: lorsque dans l'option TabNavigator est réglée lazy == false, TabNavigator toutes ses scènes render lorsque l'application commence. Les scènes sont rendues quand elles sont appelées, mais quand nous appelons la dernière scène (dans notre cas, Profile), toutes les scènes qui sont devant sont également affichées.

Donc, quand je tape sur Profile, il faut un certain temps pour charger toutes les scènes, et c'est vraiment mauvais pour les performances de l'application.

Que dois-je faire pour que la page de la caméra ne soit rendue que lorsqu'elle est appelée?

Et une autre question: lorsque nous quittons la scène de la caméra, l'appareil photo fonctionne toujours, comment puis-je l'éteindre quand quitter la scène?

J'utilise package react-native-qrcode-scanner qui utilise react-native-camera: ^0.10.0

Answer 1

S'il est intéressant pour quelqu'un que j'ai trouvé une réponse. J'utilise react-native-tab-navigator avec StackNavigator natif.

Comment je Cameras:

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

changement d'état est actif lorsque:

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

dans react-native-tab-navigator nous pouvons obtenir l'état his.state.selectedTab et si ce n'est pas « appareil photo » dans mon cas, nous envoyons l'événement.

Mon exemple:

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

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