preface

Recently, I have learned React Native by myself, and developed an entry-level app using the API provided by dry Cargo Concentration Camp (thank you so much to GANK!). .

During the development process, I used React Navigation, which is recommended by Facebook, to navigate the page and it works really well. Here are some tips I’ve picked up along the way. (Although there seems to be no skill, but still as notes to write down 😂)

This is not an introduction to how to use React Navigation, so check out the official documentation.

How can THE APP not return to the login interface after clicking the back button after jumping from the login interface?

Generally, after entering your account password on the login screen, the app will jump to the home page and then click the back button (for Android devices) to either exit the app or directly return to the background of the phone. When using React Navigation, the app will return to the login screen if you press the back button. Here’s how I did it:

  • First import NavigationActions from react-Navigation

import {NavigationActions} from 'react-navigation';

  • One of the following functions is called when the login button is clicked to go to the main page
 const resetActions = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({routeName: 'Main'})]
        });
 this.props.navigation.dispatch(resetActions);
Copy the code

Delete navigation state previously set, and then set new action to replace it, and then reset the interface of the home page to the first (index: 0).

Unify the style of the title bar

When using StackNavigator for interface navigation, the default title bar (similar to toolbars in Android) is given to each interface, and each interface is customizable as follows:

Static navigationOptions = {headerTitle: "login ",};Copy the code

Because the title bar in the app is generally the same style, it would be a waste of time if every interface had to type the same style code, so there is a reference to this in the official documentation, stackatorConfig object, where we can declare the background color of the title bar. Title font color, position, etc.

const SimpleApp = StackNavigator({
    Login: {screen: LoginPage},
    Main: {screen:Navigator},
    Home :{screen:HomePage},
    Next: {screen: ThirdScreen},
    Gank: {screen: GankPage},
    Blog: {screen: BlogPage},
    PersonalInfo: {screen: PersonalInfoPage}
}, {
    initialRouteName: 'Login',
    navigationOptions: {
        headerTintColor: '#51c4fe',
        headerStyle: {backgroundColor: "white"},
        headerTitleStyle: {alignSelf: 'center'},
    },
});

Copy the code

Remove TabNavigator to reduce code redundancy

TabNavigator functions as the four navigation bars at the bottom of the app. Generally, when jumping from the login interface to the home page, the home page is the display of four bottom navigation bar and the control interface navigation, do not go to the home page for some business logic operations, because this will cause some problems in the function responsibility!

The complete code is available in my Github GankAndPanyz login.js file for this project

The last

Little brother is not talented, but also hope more advice!