ReactNative common plug-ins

Project version introduction

Currently used project node version V14 17.5, NPM version 6.14.14, the template used in reactnative project is combined with the project template architecture of typescript syntax. The installation method is as follows:

npx react-native init xxx(Project name) --template react-native-template-typescript

After completion, you can directly run yarn android or npm run android to start the project.

1. react-native-config

View the web address of the reactNative plug-in
At present, the best way to configure reactNative multi environment variables is to use the plug-in react native config, which can be created in the root directory env file. The content can be tested and configured as follows:


On app Add in TSX file:

import Config from 'react-native-config';

Then follow the steps of jscoach:
I. yarn add react native config
II. Reactnative can be automatically introduced after version 0.60 without connecting to react native link react native config
III. iOS needs to enter the project first, and then (cd ios; pod install)
Four aspects of Android need to be introduced manually

  1. android/settings.gradle
    include ':react-native-config'
    project(':react-native-config').projectDir = new File(rootProject.projectDir, '.../node_modules/react-native-config/android')

  2. android/app/build.gradle
    dependencies {
    implementation "com.facebook.react:react-native:+" // From node_modules
    implementation project(':react-native-config')
    Add apply from: project(': react native config') to the last line projectDir.getPath() + “/dotenv.gradle”

After completion, you can directly run yarn android or npm run android to start the project. Check whether there is output content.

2. Absolute path configuration

The project directory is complicated, and configurable paths need to be configured for unified reference. At this time, the download Plug-in Babel plugin module resolver needs to be installed

yarn add -D babel-plugin-module-resolver

Babel. In the project root directory config. Configuring plugins in JS

plugins: [
        root: ['./src'],
        alias: {
          '@': './src',
          '@/utils': './src/utils',
          '@/assets': './src/assets',
          '@/components': './src/components',
          '@/models': './src/models',
          '@/navigator': './src/navigator',
          '@/config': './src/config',
          '@/pages': './src/pages',

The reference shown in the figure below will not report an error. In addition, you need to configure tsconfig baseUrl and path attributes in JSON

import {test} from '@/utils';
"baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
"paths": {
  "@/assets/*": ["assets/*"],
  "@/components/*": ["components/*"],
  "@/config/*": ["config/*"],
  "@/models/*": ["models/*"],
  "@/navigator/*": ["navigator/*"],
  "@/pages/*": ["pages/*"],
  "@/utils/*": ["utils/*"]

3. Install the React Native stack navigator

React Navigation On the official website, you can view the basic stack navigator commonly used by React Native, which is similar to the routing mode and navigation mode of front-end Vue and react methods. Installation mode Reference website

1. Use the yarn command line to install (refer to me here, there is a problem on the official website)

	yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2. IOS items corresponding to MacOS users need to be downloaded by pod
cd ios; pod install

3. Use react native screens in android project. The plug-in needs to be configured in some files:

1) In android/app/src/main/java / project name / mainactivity Add code to Java:

protected void onCreate(Bundle savedInstanceState) {

2) At the same time, in mainactivity This code is introduced at the top of Java

import android.os.Bundle;

3) Index at the bottom of the project JS file:

import 'react-native-gesture-handler';

4) Download the Stack Navigator plug-in Stack Navigator from the project

yarn add @react-navigation/stack

After the installation, you can run the corresponding native environment on Yahoo Android or Yahoo IOS to try whether there is an error. If so, you can tune it yourself or refer to my Solution collection
Here is the main logic code about routing:

// navigation/index.tsx
import React from 'react';
import {Platform, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
} from '@react-navigation/stack';
import Home from '@/pages/Home';
import Detail from '@/pages/Detail';

export type RootStackParamList = {
  Home: undefined;
  Detail: {
    id: number;

export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

let Stack = createStackNavigator<RootStackParamList>();

const MyStackNavigation = () => {
  return (
    // <Text>11</Text>
        // Configuration of all stack navigation
          // Head navigation center
          headerTitleAlign: 'center',
          // Title bar mode, ios(float): share a title bar android(screen): one title bar per page none the whole title bar disappears
          headerMode: 'float',
          // Animate the head
          headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
          // Animate the bottom page
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          // android is off by default, so it is set to on by default
          gestureEnabled: true,
          // android default gesture direction is vertical, so set the default horizontal
          gestureDirection: 'horizontal',
          // There is a projection effect between the android header and the page (because android has no shadow effect), so it is set uniformly
          headerStyle: {
              android: {
                elevation: 0,
                borderBottomWidth: StyleSheet.hairlineWidth,
              // ios: {

              // }
          options={{headerTitleAlign: 'center', headerTitle: 'home page'}}
          options={{headerTitleAlign: 'center', headerTitle: 'Detail page'}}

export default MyStackNavigation;

The comments in the note will explain some parameters and precautions of the route, especially the content of screenOptions

4. About the way of route navigation jump value transmission

It mainly uses the StackNavigationProp module in @ react navigation / stack and RouteProp in @ react navigation / native;
Let's assume that the Home page transmits a value of 100 to the Detail page. Here is the Home page code

import React, {FC} from 'react';
import {View, Text, Button} from 'react-native';
import {RootStackNavigation} from '@/navigator/index';

interface IProps {
  navigation: RootStackNavigation;

const Home: FC<IProps> = props => {
  const onPress = () => {
    const {navigation} = props;
    navigation.navigate('Detail', {
      id: 100,

  return (
      <Button title="Jump to details page" onPress={onPress} />

export default Home;

Or Detail page code:

import React, {FC} from 'react';
import {View, Text} from 'react-native';
import {RouteProp} from '@react-navigation/native';
import {RootStackParamList} from '@/navigator/index';

interface IProps {
  route: RouteProp<RootStackParamList, 'Detail'>;

const Detail: FC<IProps> = props => {
  const {route} = props;

  return (

export default Detail;

To be continued!

Keywords: Android React React Native

Added by NZ_Kiwi on Mon, 07 Mar 2022 05:12:37 +0200