react-native - createBottomTabNavigator : how do I reload/refresh a tab screen on tab on the tab-icon?

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 时，会打开扫描二维码的摄像头。

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， View 不会刷新或呈现新的。所以相机不再打开，我看到黑屏。

有办法解决这个问题吗？我可以通过点击 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: 将 withNavigationFocus 从 react-navigation 导入到你的类中。

2:然后像这样导出:export default withNavigationFocus(yourclassname)

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

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

};