createBottomTabNavigator: как перезагрузить / обновить экран вкладки на вкладке на значке вкладки?

Question

Итак, у меня есть TabNavigator с 3 экранами.

import React from 'react';
import {TabNavigator,createBottomTabNavigator } from 'react-navigation';


import ActivateScannerPage from '../pages/ActivateScannerPage';
import ScanTicketPage from '../pages/ScanTicketPage'; 
import HomePage from '../pages/HomePage'; 
import SwipeList from '../components/SwipeList';

import FontAwesome, { Icons } from 'react-native-fontawesome';
import { Icon } from 'react-native-elements';

export default createBottomTabNavigator (
    {
        HomeScreen:{
            screen:HomePage,
            navigationOptions: {
                tabBarIcon:()=>  
                <Icon
                name='home'
                type='font-awesome'
                color='#5bc0de'/>
            },
        },
        AcitvateScannerPage:{
            screen:ActivateScannerPage,
            navigationOptions: {
                tabBarIcon:()=>   <Icon
                name='qrcode'
                type='font-awesome'
                color='#5bc0de'/>
            },
        },
        ScanTicketPage:{
            screen:ScanTicketPage,
            navigationOptions: {
                tabBarIcon:()=>  <Icon
                name='ticket'
                type='font-awesome'
                color='#5bc0de'/>
            },
        },

    },
    {
        tabBarOptions: {
            activeTintColor: '#5bc0de',
            inactiveTintColor :'white',
            labelStyle: {
              fontSize: 12,
            },
            style: {
              backgroundColor: '#444444'
            },
          }
    }



);

Когда я нажимаю на ActivateScannerPage, открывается камера для сканирования QR-кода.

import React, { Component } from 'react';

import {
  StyleSheet,
  View,

} from 'react-native';

import QrCode from '../components/QrCode';

 class ActivateScannerPage extends Component {
  static navigationOptions = {
    title: 'Aktivierung Scanner',
  };


  constructor (props){
    super(props);
}



render(){
  return(
    <View style={styles.viewContent}>
       <QrCode scanner={true} headerText="Aktivieren Sie Ihren Scanner"/>
    </View>
  );
}

 }


 const styles = StyleSheet.create({
  viewContent:{
      flex:1
  }
 });

 export default ActivateScannerPage;

Поэтому моя проблема заключается в том, что когда приложение запускается, и я нажимаю на вкладку "ActivateScannerPage/Aktivierung Scanner", оно открывает камеру, и я могу без проблем сканировать свои коды. Но когда я переключаюсь на другую вкладку "Экран", например, на главный экран, а затем возвращаюсь на страницу AcitivateScannerPage, представление не обновляется и не отображается новым. Поэтому камера больше не открывается, и я вижу черный экран.

Есть ли способ это исправить? Можно ли перезагрузить или заново отобразить экран, коснувшись вкладки "Иконка"?

Благодарю.

РЕДАКТИРОВАТЬ:

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  AsyncStorage,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import moment from 'moment';
import { Icon } from 'react-native-elements';

 class QrCode extends Component {


  static navigationOptions=(props)=>({
           title:  `${props.navigation.state.params.scannerName}`,
           headerTintColor: 'white',
           headerStyle: {backgroundColor: '#444444'},
           headerTitleStyle: { color: 'white' },

        })


  constructor(props){
    super(props);
    this.state={
     .....some states.....
  }

  }


  onSuccess(e) {

    ..... do something..... here I get my data which I use

  }


  fetchDataScanner(dataMacroID,requestKey,hash) {
......

  }

  fetchDataTicketCheck(dataMacroID,requestKey,ticketValue){
.....

  }

  fetchDataTicketValidate(dataMacroID,requestKey,dataMicroID,ticketValue){
 .....

  }

  saveDataScannerActivation=()=>{
   .....

}



  render() {
    return (
    <View style={styles.viewContent}>

    <View style={{flex:4}}>
    <QRCodeScanner 
      reactivateTimeout={2000}
      reactivate={true}
      onRead={this.onSuccess.bind(this)}
    />
    </View>

      </View>
    );
  }
}

......

export default QrCode;

Answer 1

На экранах, которые вы разработали для своих вкладок, нужно выполнять плавные шаги:

1: импорт withNavigationFocus от react-navigation в ваш класс.

2: затем экспортируйте ваш как это: export default withNavigationFocus(yourclassname)

3: используйте этот код для обновления или управления вашим состоянием

 shouldComponentUpdate = (nextProps, nextState) => {
if (nextProps.isFocused) {
  ...
  return true;
} else {
  ...
  return false;
}

};

Answer 2

С react-navigation вы можете обнаружить, когда ActivateScannerPage активен / постучал.

Добавьте этот код в componentDidMount в ActivateScannerPage

this.subs = [
  this.props.navigation.addListener('didFocus', () => this.isFocused()),
];

И удалить слушателя, если ActivateScannerPage размонтируется

componentWillUnmount() {
  this.subs.forEach(sub => sub.remove());
}