React – Native navigator

One, foreword

The company needs to make an app. Because I am a front-end engineer, I choose React – Native for the technology stack

Because I have some experience in making small programs and Vue before, when I received this task, I thought about how to make this app from the following aspects

1. Routing management

   In app.json, Pages places all routes and all BottomTabBar routes in tabBar. In addition, wx.navigateTo is used to jump to the normal page and wx.switchTab is used to jump to the tabBar page

   So how does react- Native handle routing between normal pages and tabBar pages?

   The routing API of the applet can not take parameters except to jump to tabBar page, other is can take parameters after the path

   ** How does react-native carry parameters when jumping routes **

   In Vue, there is the concept of nested routines

   Does react-native have a similar concept

2. State management

   Vue has Vuex for global state management, React has Redux,

   How do you handle this in React-native

   What about react-Native state managed persistence

3. The network request

   How does React – Native implement network requests

   Whether the third-party library axios can be used

4. Lifecycle, hook functions

   Both applets and Vues have lifecycle functions that do specific actions for specific periods of time

   So does react-Native have a life cycle function

5. Invoking hardware Functions

   How does react-Native call the phone’s camera

   How does React-Native get user photos

   How does React-Native get user authorization

This article summarizes how to write routes in React – Native

Routing stack

I will use the react navigation 4. Library of x, this is the website of https://reactnavigation.org/docs/zh-Hans/4.x/getting-started.html

How to install, the official website is very detailed, here do not repeat

Routing in RN is a stack concept, as follows

When we click from the home page to the device page, and then to the device details page, we are constantly adding routes to the stack, and when we return, we remove the device details page from the stack, then take the device page, until the home page is left

3. Create a routing stack

CreateStackNavigator creates a routing stack

NPM install react-navigation-stack@react-native community/ marshall-view install dependencies

Import {createStackNavigator} from "react-navigation-stack" const AppNavigator = createStackNavigator({// route name: Routing of the Home page, HomePage, / / HomePage needs to write your own and import the Device: DevicePage, DeviceDetail: DeviceDetailPage, / / need to pay attention to, The order of the pages introduced above does not affect the display of the routing stack},{// What is the initial routing page? InitialRouteName :"Home"// The initial page displays a HomePage})Copy the code

4. Route jump

We create AppNavigator will give HomePage, DevicePage DeviceDetailPage navigation page components transfer this prop, we can use the navigation to jump of the page

Import React,{Component} from "React" export default class HomePage extends Component{render(){<View> <Text> home </Text> < Button title = "jump to page equipment" onPress = {() = > {this. Props. Navigation. Navigate (" Device ")}} / > < / View >}}Copy the code

API for route hops

This. Props. Navigation. Navigate (routing "component name"). This props. Navigation. Push (' routing component name '). This props. Navigation. GoBack (' routing component name ') / / goBack don't write in parentheses (), if the route name and the last page of the routing component name, do not jump, enclosing props. Navigation. PopToTop (' routing component name ') / / popToTop don't write in parentheses (), If the component route name is not the same as the route name on the topmost page, it will not jump.Copy the code

Navigate: Checks whether the component is in the stack and returns to the page if it is, or creates a new component for pushback if it is not

Push: Create a new component for the pushdown display

GoBack: Returns to the previous page

PopToTop: Back to the home page component

Pass parameters between pages

This. Props. Navigation. Navigate method parameters can be passed on to the next page, as shown in the following code

< View > < Text > home page < / Text > < Button title = "jump to Details page" onPress = {() = > this. Props, navigation, navigate (' Details' {newsId: "100", 1 "newsName" news, newsTag: "important"})} > < / Button > < / View >Copy the code

Page receive parameter

Parameter 1: < Text > {this. Props. Navigation. GetParam (" newsId ")} < / Text > 2: < Text > parameters {this. Props. Navigation. GetParam (" newsName ")} < / Text > Parameter 3: < Text > {this. Props. Navigation. GetParam (" newsTag ")} < / Text > < Text > all parameters: {this. Props. Navigation. State. Params} < / Text >Copy the code

Create BottomTabBar

NPM install react-navigation-tabs install dependencies

import {createBottomTabNavigator,BottomTabBar} from "react-navigation-tabs" import Icons from "react-native-vector-icons/Feather" const AppBottomTabBar = createBottomTabNavigator({ Home:{ screen:HomePage, NavigationOptions :{title:" home ", TabIcon ({tintColor,focused})=>(<Icons name={'home'} size={26} style={{color:tintColor} />)}}, Device:DevicePage, Message:MessagePage, Mine:MinePage},{// tabBarComponent:props=>(// activeTintColor <BottomTabBar {... props} activeTintColor="#34b5ff"/> ) })Copy the code

The react – native has a matching icon library, https://github.com/oblador/react-native-vector-icons,

NPM install –save react-native vector-icons install dependencies

React-native link React-native Vector-icons enable ICONS to be displayed on ios and Android

6. Combine tabBar routing with common page routing

There is a requirement as follows:

One second after the welcome page is displayed, the tabBar page will be displayed. TabBar page can be redirected to other pages

Because the routing stack is continuous, I don’t want the tabBar page to return to the login page after a successful login

createSwitchNavigator

SwitchNavigator can help us

The purpose of the SwitchNavigator is to display only one page at a time. By default, it does not handle the return operation and resets the route to its default state when you switch. This is the exact behavior we want from the authentication process.

import {createSwitchNavigator,createAppContainer} from "react-navigation" import {createStackNavigator} from "react-navigation-stack" const InitNavigator = createStackNavigator({ Welcome:WelcomePage, Login:LoginPage, }) const MainNavigator = createStackNavigator({Home:{// Home = BottomTabPage, navigationOptions:{ headerShown:false } }, DeviceDetail:DeviceDetailPage, }) export const RootNavigator = createAppContainer(createSwitchNavigator({ Init:InitNavigator, Main:MainNavigator }))Copy the code

The tabBar page is the component that creates the BottomTabBar and returns the BottomTabBar page

// BottomTabPage import React,{Component} from "react" import Icons from "react-native-vector-icons/Feather" import {createBottomTabNavigator,BottomTabBar} from "react-navigation-tabs" import {createAppContainer} from "react-navigation"  import { StyleSheet, Image, } from "react-native" import HomePage from ".. /page/HomePage" import DevicePage from ".. /page/DevicePage" import MinePage from ".. /page/MinePage" import MessagePage from ".. /page/MessagePage" const Tabs = {Home:{screen:HomePage, navigationOptions:{title:" HomePage ", tabBarIcon:({tintColor,focused})=>( <Icons name={'home'} size={26} style={{color:tintColor}} /> ) } }, Device... , Message... , Mine... , } export default class MainTabNavigator extends Component{ _Navigator(){ const {Home,Device,Message,Mine} = Tabs; const tabs={Home,Device,Message,Mine} if(! this.navigator){ this.navigator=createAppContainer(createBottomTabNavigator( tabs,{ tabBarComponent:props=> <BottomTabBar {... props} activeTintColor="#34b5ff"/> } )) } return this.navigator } render(){ const TabNavigator = this._Navigator() return <TabNavigator/>; } } const styles = StyleSheet.create({ BottomTabBarIconImage:{ width:30, height:30 } })Copy the code

Summarize the current routing structure

When I successfully log in to LoginPage, I can jump to the home page like this

This. Props. Navigation. Navigate (" main ") / / because Home sorting first, so jump to the main page will show the Home pageCopy the code

The Home page is as follows

When I click on my TAB, I jump to the MinePage, and when I want to jump from the MinePage page to other pages (personal information pages, etc.). It doesn’t work.

To solve this problem, we have to save navigation on the Home page and then use it from the MinePage

NavigatiorUtil export default class NavigatorUril{static goPage(params,page){// In the BottomTabBar page, take navigation const navigation = NavigationUtil.navigation if(! navigation){ console.log("NavigationUtil.navigation can not be null") return; } navigation.navigate( page, { ... params } ) } }Copy the code

// Home page import NavigationUtil from ".. /navigator/NavigationUtil" export default class BottomTabPage extends Component{ render(){ NavigationUtil.navigation = this.props.navigation return( <View style={styles.wrapper}> <MainTabNavigator/> </View> ) } }Copy the code

// MinePage import NavigationUtil from ".. /navigator/NavigationUtil" export default class MinePage extends Component { render(){ return ( <View Style ={styles.wrapper}> <Text style={styles.item}> my </Text> <TouchableHighlight style={styles.button} onPress={()=>{ Navigationutil.gopage ({},"DeviceGroupManager")}} > <Text style={styles.btnText}> </View> ) } }Copy the code

Create TopBarNavigatior

createMaterialTopTabNavigator

import {createMaterialTopNavigator} from "react-navigation-tabs" import {createAppContainer} from "react-navigation" export default class HomePage extends Component { _topTabBar(){ if(! this.topTabBar){ this.topTabBar = createAppContainer(createMaterialTopTabNavigator({ tab1:{ screen:HomeDevicePage, NavigationOptions :{title:" family "}}, tab2:{screen:SchoolDevicePage, NavigationOptions :{title:" school "}}},{tabBarOptions: {tabStyle: styles.tabStyle,// upperCaseLabel: ScrollEnabled: true,// Whether TAB scrolling is supported, the default is false style: {// TAB bar style object backgroundColor: IndicatorStyle: styles. IndicatorStyle,// label indicatorStyle labelStyle: Styles. labelStyle,// Text style}, lazy: true })) } return this.topTabBar } render(){ const TopTabBar = this._topTabBar() return ( <View style={{flex:1,marginTop:30}}> <TopTabBar/> </View> ) } }Copy the code

conclusion

If there are any mistakes or omissions in the article, please correct them. If you think the article is good, please give a thumbs up.

Author: Hu Zhiwu

Time: 2020/02/08