在使用 react-navigation时(版本如下)
react-navigation":
"1.5.11",
假设2个tab页,A与B
登陆之后默认呈现A页面,通过触摸底部B切换B页面。
A与B页面只在第一次进入时执行react生命周期函数,请求数据并渲染,二次切换页面时并不会触发。
如果有二次查询的需求时,可按照如下方法进行。
假设需要每次点击B页面都需要查询数据并渲染。
1.在B页面中添加如下代码
componentDidMount() {
this._queryData();
this.props.navigation.setParams({ queryData: () => { this._queryData(); } });//在导航中添加查询数据的方法,设置一个钩子
}
2.在tab页面设置B页面属性中添加tabBarOnPress方法即可。
B: {
screen: BPage,
navigationOptions: () => ({
tabBarLabel: 'B页面',
tabBarIcon: ({ tintColor }) => (
<IconFontAwesome name="calendar-check-o" size={26} style={{ color: tintColor }} />
),
tabBarOnPress: (obj) => {
// 任务数据redux修改,点击每次查询
if (obj.scene.route.params && obj.scene.route.params.queryList) {
obj.scene.route.params.queryList();//查询数据
}
obj.jumpToIndex(obj.scene.index);//跳转B页面
},
}),
},