Learn reactNative notes

Installation environment

Note: Do not use CNPM! CNPM installed module path is strange, packager can not correctly identify!

The installationnode

  • Mac_IOS install Homebrew first

    A package management tool for MacOS, Homebrew is developed in Ruby and needs to be checked if Ruby is installed (ruby 1.8.7 is installed by default on MacOS).

    // Check the ruby installation path which rubyCopy the code
    Ruby --versionCopy the code

    • Replacing Ruby Images

      1. Ruby’s default source address is a foreign network address. Run the following terminal command to view the current mirror address
      Gem sources -l Results: *** CURRENT Sources *** https://rubygems.org/Copy the code
      1. First remove the current mirror
      Gem sources --remove https://rubygems.org/ Result: https://rubygems.org/ removed from sourcesCopy the code
      1. Then add the latest Ruby image address in the country
      Gem sources -a https://gems.ruby-china.com/ Results: https://gems.ruby-china.com/ added to sourcesCopy the code

    • The installationhomebrew

      Open the website link www.cnblogs.com/wxhou/p/141…

      1. Homebrew default installation script:

        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Copy the code

      2. If you wait a while and get the following message, you cannot access the official script address:

        curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused
Copy the code

      3. Jsdelivr CDN is adopted to accelerate access [CUST image source to access script files]

        /usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
Copy the code

      4. Git failure may occur during the execution of the above methods [homebrew-core]

        1. The error prompts the following code:
        git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
Copy the code
        1. Follow the tutorial to blog.csdn.net/m0_46197393…

      5. Set up the mirror

        • USTC
        git -C "$(brew --repo)" remote set-url origin https://mirrors.ustc.edu.cn/brew.git git -C "$(brew --repo homebrew/core)"  remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git git -C "$(brew --repo homebrew/cask)" remote set-url origin https://mirrors.ustc.edu.cn/homebrew-cask.git brew updateCopy the code
        • Tsinghua University
        git -C "$(brew --repo)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git git -C "$(brew --repo homebrew/core)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-core.git git -C "$(brew --repo homebrew/cask)" remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/homebrew-cask.git  brew updateCopy the code
        • Install the node
        brew install node
Copy the code
        • Install Watchman.

        Watchman is a tool provided by Facebook to monitor file system changes. Installing this tool can improve development-time performance (Packager can quickly catch changes to files for real-time refreshes)

        brew install watchman
Copy the code

  • Window_Android installation node

    nodejs.org/zh-cn/

npxSwitch the mirror

Note: Do not use CNPM! CNPM installed module path is strange, packager can not correctly identify!

npx nrm use taobao
Copy the code

Installation of yarn

npm install -g yarn
Copy the code

Xcode 与 Android StudioTo view the document

CocoaPods [Mac_Ios]

CocoaPods is a package manager written in Ruby (think of it as NPM for iOS). React Native iOS versions require CocoaPods to manage dependencies starting with version 0.60

brew install cocoapods
Copy the code

The project installs dependencies through Cocoapods. The final scaffold does not install dependencies through Cocoapods.

Erection of scaffolding

npx react-native init gunner --template react-native-template-typescript
Copy the code

  1. Installing CocoaPods Dependencies installs the ios dependencies in the root directory of the project

  2. If the wait is too long, you can go directly to the exhibition hall and then execute the order

cd ./gunner/ios && pod install
Copy the code

  1. Error: SDK “iphoneOS” cannot be located

    Blog.csdn.net/weixin_4298…

Window_AndroidAn error

Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`
Copy the code

Configure the environment

  • Create an environment variable named ANDROID_HOME

  • Find the SDK C:\Users\ your username \AppData\Local\Android\ SDK

    You can view the actual path to the SDK from the “Preferences” menu in Android Studio: Appearance & Behavior → System Settings → Android SDK.

  • Add some tool directories to the environment variable Path

    %ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
Copy the code

  • Make sure the JDK is in the Path environment variable

  • Genymotion Android VIRTUAL machine installation

Execution failed for task ':app:installDebug'
Copy the code

There are apps in the phone that can’t cover the installation

Mac_iosAn error

We ran "xcodebuild" command but it exited with error code 65
Copy the code

Blog.csdn.net/survivorsfy…

Need developer tools account [Team]

Stackoverflow.com/questions/6…

Podfile file 2021/2/7

use_flipper! ({'Flipper' => '0.74.0'})Copy the code

Specification commit commit

  • Install the Commitlint + HusKY specification commit

    • Install the library

      cnpm install commitizen cz-customizable husky commitlint-config-cz lint-staged cz-conventional-changelog @commitlint/cli  @commitlint/config-conventional -DCopy the code

    • Commitlint.config.js documentation

      The first bit: 0 is disable, 1 is warning, and 2 is error

      The second: application or not, the optional always | never

      Third bit: the value of rule

      type(scope?) : subject body? footer? Scope refers to the commit scope (which modules are modified) subject refers to the short description of the commit body refers to the commit body (long description) footer refers to the commit footer informationCopy the code
      • Type-enum: The type is found in the value
      • subject-full-stop:
      • Type-case: indicates the case of the type
      • Scope-empty: Modifies the scope
      • Scope-case: scope value….

  • Configuration package. Json

    Husky Hoosks is configured according to commitlint.config.js

    Lint-passage: includes esLint hooks

    "scripts":{ "commit": "git-cz" }, "config": { "commitizen": { "path": "cz-customizable" } }, "husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" } }, "lint-staged": { "*.{js,jsx,vue}": []},Copy the code

  • .cz-config.js

    'use strict'; Module. Exports = {types: [{value: 'feat', name: 'feat'}, {value: 'fix', name: 'fix'}, {value: 'UI', name:' UI: update UI'}, {value: 'refactor', name: 'refactor: code refactoring '}, {value: 'release', name: 'release: Publish '}, {value: 'docs', name: 'docs: modify document '}, {value: 'test', name: 'test: Add or Delete test'}, {value: 'chore', name: 'Chore: Change configuration file '}, {value: 'style', name: 'style: code style changes do not affect logic '}, {value: 'revert', name: 'Revert: Version Rollback'}, {value: 'add', name: 'add: add dependencies'}, {value: 'del', name: 'del: delete code/file '}, {value: 'build', name: 'del: modify project build system '}, {value: 'perf', name: 'perf: performance optimization '}, {value: 'breaking change', name: 'breaking change: major changes'}, {value: 'types', name: 'types: modify definition file '}], scopes: [], messages: {type: 'Select change type: \n', scope: 'Please enter the range of changes :\n', // If allowCustomscopes are true, use // customScope: 'Denote the SCOPE of this change:', subject: 'Short description :\n', body:' Detailed description. The use of "|" wrap: \ n ', product: 'product Changes list: \ n', the footer: 'shut down the list of issues. : #31, #34:\n', confirmCommit: 'Confirm submission using the above information? (y)' }, allowCustomScopes: true, allowBreakingChanges: ["feat", "fix"] };Copy the code

  • commitlint.config.js

    module.exports = { extends: ['@commitlint/config-conventional', "cz"], rules: { 'type-enum': [ 2, 'always', [" release ", / * * / "del" belly, deleting code / / * * / "add", / * * / "UI" new dependence, update the UI * / / * "feat", / * * / "fix" new function, fixing bugs / * * / "docs", / * Modify the document * / "style", / * code style changes will not affect the logical * / "refactor", code refactoring / * * / "test", add and remove test / * * / "chore", / * * / "revert" change the configuration file, / * * / rollback code "Product change", big changes / * * / "types", / * * / "perf" modify the definition file, / * * / "build" optimization / * * modify project build tools /]], 'type - empty: [2, 'never'], 'type-case': [0], 'scope-empty': [0], 'subject-full-stop': [0, 'never'], 'subject-empty': [2] 'never', / * submitted does not comply with the specifications, can also be submitted, but there will be a warning * / 'subject - case: [0,' never '], 'scope - case: [2, 'always', 'lower-case'], 'header-max-length': [2, 'always', 72], } }Copy the code

Install eslint

yarn add -D eslint-config-airbnb-typescript eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-native @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-typescript
Copy the code

Set an alias

Reactnative. Cn/docs/typesc…

React-native route navigation solution

Xcode is required to reprogram the APP into the device

Juejin. Cn/post / 690124…

  • React Navigation 5.x Bottom TAB Navigation@react-navigation/bottom-tabs
// TabNavigator
yarn add @react-navigation/bottom-tabs
Copy the code
  • React Navigation 5.x page routing@react-navigation/native
    • React-native gesture-handler: used to switch pages with gestures.
    • React-native – Screens: For the native layer to free up unshown pages and improve app memory usage.
    • React-native safe-area-context: ensures that the page is displayed in a secure area (mainly for bangs).
    • React-native community/ marshall-view: Use the color Settings to return buttons in the header navigation bar.
    • React navigation/native is the core of react navigation.
// Install react-navigation yarn add @react-navigation/nativeCopy the code
Yarn add react-native- stage-handler react-native-reanimated react-native- cheaper react-native-safe-area-context @react-native-community/masked-viewCopy the code
  • React Navigation 5.x stack routing@react-navigation/stack
yarn add @react-navigation/stack
Copy the code

Recompile app

A pit

Note: In order for the new image resource mechanism to work properly, the image name in require must be a static string (no variables! Because require is executed at compile time, not run time! reactnative.cn/docs/images

IOS pod libwebp error resolution

www.jianshu.com/p/3b44a660b…

www.cnblogs.com/lude1994/p/… — The homepage also needs to be modified

React-native ScorllView cannot be populated with Flex: 1

Blog.csdn.net/K563161969/…

android == Execution failed for task ‘:app:processDebugManifest’

Github.com/razorpay/re…

Github.com/react-nativ…

minSdkVersion=21

Absolute positioning cannot appear in scrollView

www.5axxw.com/questions/c…

react-native-image-crop-picker android

Github.com/ivpusic/rea…

Stackoverflow.com/questions/6…

Stackoverflow.com/questions/6…

NdkVersion ‘22.0.7026061’ configuration

react-native-video

Question: the Error undefined is not an object (evaluating ‘RCTVideoInstance. Contants’)

Github.com/react-nativ…

Local data persistence

We used to import AsyncStorage from react-Native, but react says to extract AsyncStorage from React-Native. That is, it will be removed from the react-native package in the future version. It suggests that we import this component from @react-native community/async-storage

Yarn add @react-native community/async-storage // One-step encapsulation of AsyncStorage https://github.com/sunnylqm/react-native-storage/blob/master/README.zh-CN.md yarn add react-native-storage yarn run react-native link @react-native-community/async-storage cd ios pod installCopy the code

Recompile app

Install the UI library react-native Elements

  • The installation
yarn add react-native-elements
Copy the code
  • Install icon

If you have installed the React-native vector icon as a dependency for your project, you can skip this step. Otherwise, run the following command

yarn add react-native-vector-icons
Copy the code

Install the toast

Yarn add [email protected] react - native - root - toastCopy the code

In React Native > = 0.62, the new LogBox component affects the initialization of the component. For this to work, we must explicitly insert a mount point in your application like this:

// in your entry file like `App.js`

// In theory you don't have to install `react-native-root-siblings` because it's a dep of root-toast
// But you can install it explicitly if your editor complains about it.
import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function
return (
  <RootSiblingParent>  // <- use RootSiblingParent to wrap your root component
    <App />
  </RootSiblingParent>
);
Copy the code

Github.com/magicismigh…

State management MOBx

www.jianshu.com/p/211c2c2c0…

www.jianshu.com/p/b3ee25857…

The gradientreact-native-linear-gradient

Github.com/react-nativ…

Remember the pod install

Web webview react – native – the webview

Github.com/react-nativ…

Need to install pod