react-navigation点击底部tab导航刷新页面

本文档基于react-navigation的 3.11.0版本

在使用react-navigation底部选项卡导航切换的时候，默认只有第一次切换页面的才会完整执行组件的生命周期，执行数据请求等逻辑，如果我们希望在每次切换的时候都要重新请求数据，也就是刷新页面，则需要调用一个不太常用的API配置：tabBarOnPress。

注意使用此配置之后，tab切换将不会自动跳转页面，需要自己手动处理跳转，具体看代码中注释（跳转处理）。

比如下图，每次切换到首页的时候需要重新请求首页的数据已达到刷新首页的效果，则步骤如下：

1、使用createBottomTabNavigator创建Home的配置如下：

createBottomTabNavigator(
	{
		Home: {
			screen: Home,
			navigationOptions: {
				tabBarLabel: '首页',
				tabBarIcon: ({focused}) => (
					focused ?
						<Image source={{uri: 'https://img.alicdn.com/xx/TB1H5ktzxv1gK0jSZFFXXb0sXXa-192-192.png'}}
						       style={{width: iconSize, height: iconSize}}/> : <Image
							source={{uri: 'https://img.alicdn.com/xx/TB1gu.vzuH2gK0jSZJnXXaT1FXa-192-192.png'}}
							style={{width: 24, height: 24}}/>
				),
			},
		},
		// ... 其他tab项配置
	}

2、Home页面添加以下代码:

class Home extends Component{
    // 在Home页面添加此配置
    static navigationOptions = () => ({
		tabBarOnPress: ({navigation, defaultHandler}) => {
		        // 需要判断一下方法存在，否则首次进入可能会报错，预计是首次加载的时候navigation可能为undefined
			navigation && navigation.state && navigation.state.params && navigation.state.params.navigatePress();
			
			//网上有些是用这句代码，尝试了似乎会报错，估计姿势没对...
			/*navigation.state.params.navigatePress();
			navigation.jumpToIndex(navigation.scene.index);*/
		}
	});
	// tab 切换到Home页面调用方法
	clickTabCallback = () => {
		// 此处是判断如果当前页面就是Home页面的话，点击底部首页不执行刷新操作，否则点击一次刷新一次
		const focused = this.props.navigation.isFocused();
		if (!focused) {
    	               // 处理跳转到首页（跳转处理）
			this.props.navigation.navigate('Home');
			// 刷新数据的方法
			this.getCount();
		}
	};

	componentDidMount() {
		//点击底部导航
		this.props.navigation.setParams({navigatePress: this.clickTabCallback});
		//其他代码...
	}
	
	//其他代码...
}

exprot default Home;

打完收工，关键点代码中已有注释，不明之处请留言。