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扫描仪”选项卡，然后它将打开相机，并且我可以毫无问题地扫描我的代码。但是当我切换到另一个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：将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的{{1}}中添加此代码

ActivateScannerPage

如果this.subs = [ this.props.navigation.addListener('didFocus', () => this.isFocused()), ];将卸载，则删除监听器

ActivateScannerPage

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

2 个答案: