createBottomTabNavigator：如何在选项卡图标上的选项卡上重新加载/刷新选项卡屏幕？

Question

所以我有一个带有 3 个屏幕的 TabNavigator。

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”选项卡，然后它会打开相机，我可以毫无问题地扫描我的代码。但是当我选择另一个 tabScreen 时，例如返回主屏幕，然后返回 AcitivateScannerPage，视图不会刷新或呈现新的。所以相机不再打开，我看到一个黑屏。

有没有办法解决这个问题？我可以通过点击 tabIcon 重新加载或重新渲染屏幕吗？

谢谢。

编辑：

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：从react-navigation 导入withNavigationFocus 到你的班级。

2：然后像这样导出你的：export default withNavigationFocus(yourclassname)

3：使用此代码更新或管理您的状态

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

};

Answer 2

使用react-navigation，您可以检测到ActivateScannerPage 何时处于活动状态/被点击。

将此代码添加到componentDidMountActivateScannerPage中

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

如果ActivateScannerPage 将卸载，则移除监听器

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