我在https://reactnavigation.org/docs/navigators/tab使用React Navigation的Tab Navigator,当我在Tab屏幕之间切换时,我没有在this.props.navigation中获得任何导航状态 .
Tab Navigator :
import React, { Component } from 'react';
import { View, Text, Image} from 'react-native';
import DashboardTabScreen from 'FinanceBakerZ/src/components/dashboard/DashboardTabScreen';
import { TabNavigator } from 'react-navigation';
render() {
console.log(this.props.navigation);
return (
<View>
<DashboardTabNavigator />
</View>
);
}
const DashboardTabNavigator = TabNavigator({
TODAY: {
screen: DashboardTabScreen
},
THISWEEK: {
screen: DashboardTabScreen
}
});
DASHBOARD SCREEN:
import React, { Component } from 'react';
import { View, Text} from 'react-native';
export default class DashboardTabScreen extends Component {
constructor(props) {
super(props);
this.state = {};
console.log('props', props);
}
render() {
console.log('props', this.props);
return (
<View style={{flex: 1}}>
<Text>Checking!</Text>
</View>
);
}
}
我在仪表板屏幕上获得道具时首先渲染组件,但是当我切换标签时我没有得到道具 . 我需要获取当前的屏幕名称,即TODAY或THISWEEK .
3 回答
你的问题是"Screen Tracking",
react-navigation
有一个官方指南 . 您可以使用onNavigationStateChange
通过使用内置导航容器来跟踪屏幕,或者如果要与Redux集成,则可以编写Redux中间件来跟踪屏幕 . 更多细节可以在官方指南中找到:Screen-Tracking . 以下是使用onNavigationStateChange
的指南中的示例代码:您是否尝试在路径对象中定义navigationOptions?
您还可以将navigationOptions设置为将使用导航对象调用的回调 .
了解有关navigationOptions的更多信息https://reactnavigation.org/docs/navigators/