directory

  • Set up mining pit in ios environment
  • Android environment set up mining pit
  • Use of the React-Native base components
  • Integration of ANTD-mobile-RN component libraries
  • React-native uses a library of font ICONS
  • How does React-Native do the startup screen and welcome page
  • [email protected] Use of navigation components

preface

After setting up the environment and using basic components, the next step is to organize large-scale APP, navigation is inevitable, just like the front-end engineering is inseparable from router. According to the material learning, it is learned that React-Native has many versions of navigation components, including the following:

  • NavigationIOS: For iOS only, it’s wrapped in UINavigationController, so it looks similar
  • Navigator: implemented using JS, will gradually be replaced and is still available
  • NavigationExperimental: The earliest navigation component, now completely deprecated
  • React-navigation: The most popular navigation component, ios and Android, is highlighted in this article

The installation of the react – navigation

The react – navigation website

Install the React navigation package in your React Native project

NPM install NPM install @react-navigation/nativeCopy the code

Then, install the react-Naviation dependencies

Yarn install yarn add react-native-reanimated react-native- Stage-handler React-native - cheaper React-native safe-area-context @react-native community/ marshall-view react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view -SCopy the code

Starting with React Native 0.60 and later, linking is automatic. Therefore, you don’t need to run the React-native link.

CD iOS pod installCopy the code

To complete the installation of react-Native Gesture-Handler, add the following before the top of the entry file (such as index.js or app.js) (make sure it’s at the top and there’s nothing else) :

import 'react-native-gesture-handler';
Copy the code

Such as:

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}
Copy the code

Introduction to navigator

The Navigator can also be viewed as a normal React component. You can use the navigator to define the navigation structure of your APP. The navigator can also render generic elements, such as title bars and TAB bars that can be configured. In react-Navigation there are the following types of navigators:

  • StacktackNavigator: Similar to a regular Navigator, navigates the top navigation bar
  • CreateBottomTabNavigator: Bottom TAB navigation
  • CreateMaterialTopTabNavigator: the top of the screen Material design theme TAB bar
  • CreateDrawerNavigator: Drawer effect with sides sliding out
  • CreateSwitchNavigator: SwitchNavigator purpose is to display only one page at a time, often used in the welcome page or login page, the page no fallback.

You can create your APP from any of these navigators, or a combination of them, depending on the specific application scenario and the characteristics of each navigator.

NavigationContainer — A container for various Navigators

This is a container for each Navigator, one and only for the whole project. As follows:

<NavigationContainer onStateChange={()=>this.stateChange()}> <Stack.Navigator> <Stack.Screen name="Home" component={Home} options={{ title: }}/> < stack. Screen name="My" component={My} options={{title:" My"}}/> </ stack. Navigator> </NavigationContainer>Copy the code

The common props for this component are

  • Theme Specifies the theme
  • OnStateChange event listening when the navigation changes
  • OnReady event listening when the navigation component is ready

StacktackNavigator uses the most navigation

StacktackNavigator is the most common and most widely used navigation, providing the ability to switch between APP screens as well as managing the switch between screens as a stack, with newly switched screens placed at the top of the stack.

StacktackNavigator is configured to have the familiar look and feel of iOS and Android: the new screen slides in from the right side of iOS and fades in from the bottom of Android. On iOS, the Stack Navigator can also be configured to slide in from the bottom of the screen.

Install stackNavigator

It can be easily installed using NPM or YARN

npm install @react-navigation/stack
Copy the code

Create stackNavigator

To create a stackNavigation, call the createStackNavigator method in @react-Navigation /stack to create a stack component that requires the NavigationContainer component to wrap. Here: Home and My are different page components. The build is similar to the React-Router.

import React, { Component } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import Home from './pages/home/'; import My from "./pages/my" const Stack = createStackNavigator(); export default class AppStackContainer extends Component { render() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="My" component={My} /> </Stack.Navigator> </NavigationContainer> ); }}Copy the code

How to jump between pages

The example above shows how to configure stackNavigator navigation. After configuring the page, let them jump to each other is the key. StackNavigator gives us navigate, push, goback, popToTop and other methods to navigate to the page. The Home page code in the above example looks like this:

import React, { Component } from 'react' import { Text, Button, View, StyleSheet } from 'react-native' const styles = StyleSheet.create({ container: { flex: 1, }, }); export default class index extends Component { goMyPage(){ const { navigation } = this.props; navigation.navigate('My'); } render() {return (<View style={styles.container}> <Text> Home </Text> <Button title=" My page" onPress={() => this.goMyPage()} /> </View> ) } }Copy the code

The page has a button in which the clicking event gets a Navigation object from props. This object is the property registered by the NavigationContainer component. That’s why you wrap in NavigationContainer. The jump is made by calling the Navigation object navigate method, whose first parameter is the corresponding navigational Name property.

navigate

Standard route jump method, through this method can be arbitrary page jump, but there is a rule, is not duplicate stack. For example, navigate. Navigate (‘My’) again if there is a button on My page from Home; Will not jump to a new My page again.

push

Navigation.push (‘My’) and navigation.navigate(‘My’) are functionally similar in that they jump to a new page, except that they can be used repeatedly to open the same page. For example, the code in My page is as follows:

import React, { Component } from 'react'
import { Text, View, Button, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

export default class index extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text> My </Text>
                <Button
                    title="Go to My... again"
                    onPress={() => this.props.navigation.push('My')}
                />
                <Button title="goback" onPress={()=> this.props.navigation.goBack()}></Button>
            </View>
        )
    }
}

Copy the code

Go to My… The “Again” button can enter My page repeatedly.

Goback (Return to previous page)

Use navigation.goback () to return to the previous page

PopToTop (return to front page)

Navigation. PopToTop () will return to the default home page

How are parameters passed between pages

How does stackNaviator pass parameters between pages, which is the most common operation in regular development? It only takes two steps to complete

  • Navigation.navigate (‘RouteName’, {/* params go here */}) on the page to set the transition parameters. Such as:
navigation.navigate('My', {
    itemId: 86,
    otherParam: 'anything you want here',
});
Copy the code
  • Mounted event or in rander. Example:
const { route } = this.props; Const {itemId, otherParam} = route.params; const {itemId, otherParam} = route. console.log(itemId,otherParam)Copy the code

Set the Header properties

The best thing about stackNavigator is that it has a header at the top, so how do you set its properties? For example, background color, font color, title, and how to place buttons on the right.

Set the title

Static configuration:

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}
Copy the code

Other attributes:

  • Title: string, title text
  • HeaderTitleAlign: title alignment, left (Android default)/Center (iOS default)
  • HeaderTitleAllowFontScaling: does the headline with system size scale
  • HeaderTintColor: title color
  • HeaderTitleStyle: Custom title text style
  • HeaderTitleContainerStyle: custom title text View where the style of the container
  • HeaderTitle: title, which can be directly set with a higher priority than title. It can also be set to a function that returns a component with {allowFontScaling, style, children} as the three arguments combined with the above properties.

Left button Configuration

  • HeaderBackImage: return key, set as a function that returns the “return key” component with {tintColor:” title color “}
  • HeaderBackTitle: string The returned text to the right of the return key
  • HeaderTruncatedBackTitle: returns the text is too long, the title bar can’t display alternative returns the text, the default: “Back”
  • HeaderBackAllowFontScaling: whether returns text with system size scaling
  • HeaderBackTitleStyle: Returns a custom text style
  • HeaderBackTitleVisible: Whether to display returned text. The default value is false for Android and true for iOS
  • HeaderPressColorAndroid: Android 5 above, click back button water ripple color
  • HeaderLeftContainerStyle: custom return key and return to the style of the text in the container
  • HeaderLeft: A custom component to the left of HeaderBackButton, specified as a function or RN component. Props passes the above back key and the Settings associated with the return text

Add a right button

  • HeaderRight: Customize the component to the right of the title bar
  • HeaderRightContainerStyle: custom on the right side of the style of the component in the container

Let’s add a button to the right of the title (this is one of the most difficult places to touch on the entire screen, depending on the size of the finger and the phone, and is the normal place to place a button). Such as:

function StackScreen() { return ( <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: props => <LogoTitle {... props} />, headerRight: () => ( <Button onPress={() => alert('This is a button! ')} title="Info" color="#fff" /> ), }} /> </Stack.Navigator> ); }Copy the code

Title bar overall properties

  • HeaderStatusBarHeight: Sets the statusBar height. The Header component paddingTop is used to ensure that the statusBar height can be used even on bangs. The system automatically obtains the value by default.
  • HeaderStyle: Custom title bar style
  • headerTransparent: The difference between making the title bar transparent and setting backgroundColor in headerStyle is that setting transparency makes the page marginTop 0, and you need to define the headerBackground component.
  • HeaderBackground: title bar background component, used with headerTransparent, can be used to implement frosted glass Header effect.
  • SafeAreaInsets: Header Security zone Settings (for models with bangs). The security zone Settings are automatically set by default. You can use {left, right, top, bottom} to manually set the security zone Settings.
  • HeaderShown: Indicates whether the title bar is displayed
  • Header: a custom title bar component defined as a function that returns an RN component; If you set this property, the default Header is not used and the above property is invalid.

Dynamic update Use setOptions to update options

All of the above attributes can be updated using the following method

<Button title="Update the title" onPress={() => this.props.navigation.setOptions({ title: 'Updated! '})} / >Copy the code

Set sharing Styles

It is often desirable to configure titles in a similar manner on many screens. For example, your company’s brand color might be red, so you want the title background color to be red and the hue color to be white. Conveniently, these are the colors we use in running the example, and you’ll notice that the colors revert to the default values when you navigate to the DetailsScreen. Wouldn’t it be terrible if the option header style attribute had to be copied from HomeScreen to DetailsScreen for every single screen component we use in our application? Fortunately, we don’t. Instead, we can move the configuration up to the stack navigator under Prop screenOptions.

Such as:

function StackScreen() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  );
}
Copy the code

Tab Navigation Bottom Tab navigation

The installation

npm install @react-navigation/bottom-tabs
Copy the code

DrawerNavigator drawer navigation