This document is based on version 3.11.0 of React navigation

When using the react navigation TAB at the bottom of the navigation switch, by default, only the first switch will complete the component’s life cycle and perform data request and other logic. If we want to request data again at each switch, i.e. refresh the page, we need to call a less common API configuration: TabBarOnPress.

Note after using this configuration, TAB switching will not automatically jump to the page, you need to manually handle the jump, see the code comment (jump handling).

For example, when switching to the home page each time, the data of the home page needs to be requested again to achieve the effect of refreshing the home page, then the steps are as follows:

Create Home with createBottomTabNavigator

CreateBottomTabNavigator ({Home: {screen: Home, navigationOptions: {tabBarLabel: 'Home ', 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}}/> ), }, }, // ... Other TAB configuration}Copy the code

Add the following code to the Home page:

Class Home extends Component{// Add static navigationOptions = () => ({tabBarOnPress: ({navigation, defaultHandler}) => {// Need to check that the method exists, otherwise the first entry may be error, It is expected that navigation may be undefined navigation && navigation. State && navigation. State.params && navigation.state.params.navigatePress(); // If you want to use this code, you can use it. /*navigation.state.params.navigatePress(); navigation.jumpToIndex(navigation.scene.index); * /}}); ClickTabCallback = () => {// If the current page is a Home page, click the bottom page and do not refresh. Or click a refresh a const focused = this. Props. Navigation. IsFocused (); if (! Focused) {/ / processing to jump to the Home page (jump). This props. Navigation. Navigate (' Home '); This.getcount (); }}; ComponentDidMount () {/ / click on the navigation at the bottom of this. Props. Navigation. SetParams ({navigatePress: enclosing clickTabCallback}); // Other code... } // Other code... } exprot default Home;Copy the code

Finished work, key points in the code has been annotated, unknown please leave a message.