所以我有一个带有 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;