Build the development environment and create projects

Based on version 0.64

1. Install

Refer to Setting up the development environment

2. Create projects
NPX React-native init Project nameCopy the code
3. IOS (may have problems)
  1. Upgrade Cocoapods to 1.10.0 and above
gem install cocoapods --user-install
Copy the code

  1. Unable to install Flipper, comment first

  2. The following error occurs when Xcode is compiled and running iOS

The solution is to kill the corresponding process

Find the process. The number is the corresponding port number

lsof -i:8081
Copy the code

The number of processes to kill is the corresponding PID

kill 61385
Copy the code
  1. Command to run
yarn ios
Copy the code
4. Android (may have problems)
  1. View the JDK version number
javac -version
Copy the code
  1. Viewing shell Types
echo $0
Copy the code

  1. To modify an environment variable, call source ~/.bash_profile for it to take effect

  2. Android Studio opened an error

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 4.1 or newer.
Copy the code

This indicates that the current version of Android Studio is too low and should be upgraded.

Help–Check for Updates in the menu bar above

  1. Modify themavenFor domestic acceleration

The paths of

android/build.gradle
Copy the code

In the

google()
jcenter()
Copy the code

Replace it with the following

maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/google' }
Copy the code
  1. Command to run
yarn Android
Copy the code

Installing a plug-in

React-native Vector-icons

1. Install
yarn add react-native-vector-icons
Copy the code
2. The iOS configuration
npx pod-install ios
Copy the code

Modify the Info. The plist

<key>UIAppFonts</key>
<array>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialIcons.ttf</string>
</array>
Copy the code
3. Android

Under the android/app/build. Gradle

apply from: ".. /.. /node_modules/react-native-vector-icons/fonts.gradle"Copy the code
4. Reference

react-native-vector-icons

npx pod-install ios

The navigation bar (react – navigation)

1. Install
  • basis
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Copy the code

Description:

  1. @react-navigation/native: the navigation bar
  2. react-native-reanimated: animation library
  3. react-native-gesture-handler: gesture library
  4. react-native-screens: Native components
  5. react-native-safe-area-context: Indicates the security zone of the special-shaped screen
  6. @react-native-community/masked-viewStack navigation is used
  • Stack navigation
yarn add @react-navigation/stack
Copy the code
  • Tabbed navigation
yarn add @react-navigation/bottom-tabs
Copy the code
  • Top TAB bar (unused)
yarn add @react-navigation/material-top-tabs react-native-tab-view
Copy the code
2. The iOS configuration

npx pod-install ios

3. Android

Update mainactivity. Java with a reference to react-native Mouth-handler

4. Reference

react-navigation react-native-gesture-handler

React-native Vector-icons

1. Install
2. The iOS configuration
3. Android
4. Reference

tool

Configure an alias

yarn add babel-plugin-root-import --dev
Copy the code

Add the following content to the babel.config.js file

 "plugins": [
    [
      "babel-plugin-root-import",
      {
        "rootPathSuffix": "./src/",
        "rootPathPrefix": "@/"
      }
    ]
  ],

Copy the code

babel-plugin-root-import

Babel-plugin-module-resolver is not currently used