给出:
App.js
// import...
export default class App extends Component<Props> {
render() {
return (
<Root>
<MenuProvider>
<AppStackNavigator />
</MenuProvider>
</Root>
);
}
}
const AppStackNavigator = StackNavigator({
Main : {
screen: MainScreen
},
Detail : {
screen: DetailScreen
}
})
MainScreen.js
// import...
export default class MainScreen extends Component {
// ...
static navigationOptions = {
header: null
}
render() {
return (
<AppTabNavigator screenProps={{ rootNavigation: this.props.navigation}}/>
)
}
}
const AppTabNavigator = createMaterialBottomTabNavigator({
HomeTab: {
screen: HomeTab
},
ExerciseTab: {
screen: ExerciseTab
},
LovedTab: {
screen: LovedTab
},
FilterTab: {
screen: FilterTab
},
SettingTab: {
screen: SettingTab
}
}, {
labeled: true,
shifting: true,
initialRouteName: 'HomeTab',
barStyle: { backgroundColor: '#fff' },
backBehavior: 'none'
});
HomeTab.js-tabBarOnPress可以通过参数访问状态
//import...
export default class HomeTab extends Component {
//...
static navigationOptions = {
tabBarIcon: ({tintColor}) => (
<Icon name="md-home" style={{color: tintColor}} />
),
title: 'Home',
tabBarOnPress: ({navigation}) => {
navigation.state.params.setCurrentScreen(navigation.state);
}
}
componentDidMount() {
this.props.navigation.setParams({
...this.props.navigation.state.params,
setCurrentScreen: (state) => {
this._getFontSize();
this.props.navigation.navigate(state.key);
}
});
}
LovedTab.js-与Hometab相同的代码不起作用:(
// import..
export default class LovedTab extends Component {
//...
static navigationOptions = {
tabBarIcon: ({tintColor}) => (
<Icon name="md-heart" style={{color: tintColor}} />
),
title: 'Loved',
tabBarOnPress: ({navigation}) => {
navigation.state.params.setCurrentScreen(navigation.state);
// params is undefined - setting the same as HomeTab.js
}
}
}
问题: 我如何在LovedTab上捕获新闻事件以更新状态(重新加载当前选项卡)。似乎setParams仅在第一个选项卡(initialRouteName)上起作用。
我的主要目标是在标签处于焦点状态时重新加载LovedTab。还有其他想法吗?