React-Native TabNavigator mit Kamera (Kamera ist immer an)

Question

Ich habe TabNavigator mit Kamera innen. Codebeispiel:

Mein index.android.js

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

und meine Kamera Seite:

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

Einfach nur Leser QR-Code.

Das Problem ist, weiter: wenn in TabNavigator Option gesetzt lazy == false, TabNavigator alle seine Szenen machen, wenn die Anwendung gestartet wird.

Bei lazy == true werden Szenen wiedergegeben, wenn sie aufgerufen werden, aber wenn wir die letzte Szene aufrufen (in unserem Fall Profile), werden alle Szenen, die sich davor befinden, ebenfalls gerendert.

Wenn ich also auf Profile tippe, benötigt man etwas Zeit, um alle Szenen zu laden, und es ist wirklich schlecht für die App-Leistung.

Was muss ich tun, um die Kamera-Seite nur gerendert zu machen, wenn sie aufgerufen wird?

Und noch eine Frage: Wenn wir die Kameraszene verlassen, funktioniert die Kamera noch, wie kann ich sie ausschalten, wenn ich die Szene verlasse?

Ich verwende Paket react-native-qrcode-scanner die react-native-camera: ^0.10.0

Answer 1

zu verwenden ist, wenn es interessant für jemanden ist, ich eine Antwort gefunden.

Ich verwende react-native-tab-navigator mit nativen StackNavigator.

Wie ich in der Nähe der Kamera:

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

Zustand zu ändern ist aktiv, wenn:

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

in react-native-tab-navigator wir Zustand erhalten können his.state.selectedTab und wenn es nicht "Kamera" in meinem Fall ist, senden wir das Ereignis.

Mein Beispiel:

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

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