background

  • React-native has been updated to 0.58 and React-Navigation to 3.3.0.
  • The structure of our project is TabNavigation, which has three tabs A, B and C. According to the user’s permission, we will decide how many tabs to display, and there will be four cases, ABC, AC, BC and C (C always exists). Create four TabNavigation with createAppContainer

upgrade

  • Based on the old implementation, create three StackNavigators and four tabNavigators based on the permissions, and decide which to display based on the permissions. The new version will be generated using createXXXNavigator and exported using createAppContainer.

Problems encountered

  • Tabbar is not hidden when entering the secondary page. The previous parameter does not work. After reviewing the documentation, the official advice was to write it like a TabNavigator as part of StackNavigator, and push the entire secondary page over the TabNavigator. Reactnavigation.org/docs/en/nav…
  • Before the jump page wrote this. 2 props. Navigation. Navigate (‘ XXX ‘), in accordance with the above official suggested that modified found not make… This.props. Navigation gets the navigation of the current page, but we have a TabNavigator on the outside, so we should use the TabNavigator’s navigation to navigate(‘XXX’). Navigate (‘D’), for example, on TabC, navigate(‘D’) on A, but no navigate(‘D’) in StackNavigator for page A, and we want to cover the Tab. Navigate (‘D’) with TabC’s this.props. Navigation. Navigate tabbar is still present when navigate is in StackNavigator. My solution is to send a notification when jumping to secondary pages, receive it with TabC, and then jump to the page in TabC. A bit stupid, but can’t think of anything else…
  • Then there’s the issue of android’s physical back key. This problem is really embarrassing ah, in the first Tab into the secondary page, press the back button can be very good to return, however, in the second and third Tab into the secondary page, press the return no response, press the first Tab directly!! Oh my god ~ ~ ~ ~ and then find solutions, the official documentation gives reactnavigation.org/docs/en/cus… I want to write it in one place and then use it globally. I tried many times to write it back and forth but failed. I can only write it once for each page.

The specific implementation

  1. The structure of our project is TabNavigation, which has three tabs A, B and C. According to the user’s permission, we will decide how many tabs to display, and there will be four cases, ABC, AC, BC and C (C always exists). Create four TabNavigation with createAppContainer
const ABCTabbar = createBottomTabNavigator({
    'ANav': {screen: ANav,},
    'BNav': {screen: BNav,},
    'CNav': {screen: CNav,},
});
const ACTabbar = createBottomTabNavigator({
    'ANav': {screen: ANav,},
    'CNav': {screen: CNav,},
});
const BCTabbar = createBottomTabNavigator({
    'BNav': {screen: BNav,},
    'CNav': {screen: CNav,},
});
const CTabbar = createBottomTabNavigator({
    'CNav': {screen: CNav,},
});

const ABCTabNavigator = createAppContainer(ABCTabbar);
const ACTabNavigator = createAppContainer(ACTabbar);
const BCTabNavigator = createAppContainer(BCTabbar);
const CTabNavigator = createAppContainer(CTabbar);
export { ABCTabNavigator, ACTabNavigator, BCTabNavigator, CTabNavigator };
Copy the code
  1. Create MainNavigation. Js, determine what permissions the user has in this file, and then display the corresponding TabNavigator
class MainNav extends Component {
	render() {
	  if (this.state.permission === 'ABC') {
	    return (<ABCTabNavigator/>);
	  } else if (this.state.permission == 'AC') {
	    return (<ACTabNavigator/>);
	  } else if (this.state.permission == 'BC') {
	    return (<BCTabNavigator/>);
	  } else {
	    return(<CTabNavigator/>); }}}Copy the code
  1. In MainNavigation. Js, generate a MainNavigation and configure the achievements in render
const Main = createStackNavigator({
    MainNav: {screen: MainNav},
    DPage: {screen: DPage},
});
const MainNavigation = createAppContainer(Main);
export default MainNavigation;
Copy the code
  1. Android physics back button issue. I found a tool class androidBackaction.js from the Internet and modified it
import {BackHandler} from 'react-native';

const handleAndroidBackButton = callback => {
  BackHandler.addEventListener('hardwareBackPress', callback);
};

const removeAndroidBackButtonHandler = (callback) => {
  BackHandler.removeEventListener('hardwareBackPress', callback);
}

export {handleAndroidBackButton, removeAndroidBackButtonHandler};
Copy the code

Implementation on the page:

import {handleAndroidBackButton, removeAndroidBackButtonHandler} from '.. /.. /Util/AndroidBackAction.js'; // Your own pathexportdefault class D extends Component { constructor(props) { super(props); handleAndroidBackButton(this.onBackAndroid); // Be sure to write} herecomponentWillUnmount() { removeAndroidBackButtonHandler(this.onBackAndroid); / / must write here} onBackAndroid = () = > {this. Props. Navigation. GoBack ();return true;
    };
}

Copy the code

There is also a two-click exit application, I am written in the entrance of the place (on the configuration of the place), the way of listening is the same, is onBackAndroid implementation is not the same

onBackAndroid = () => {
    if(this.lastBackPressed && this.lastBackPressed + 2000 >= date.now ()) {// Press back in the last 2 seconds to exit the application.return false;
    }
    this.lastBackPressed = Date.now();
    ToastAndroid.show('Press Back to exit application', ToastAndroid.SHORT);
    return true;
};
Copy the code

All right, we’re done

End ~ scatter flowers ~~~