学习 reactNative 记录

三藏会法术
603 阅读7分钟

学习 reactNative 记录

安装环境

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

安装 node

  • Mac_IOS 先安装 homebrew

    MacOS 上的包管理工具,homebrew 是 ruby 开发的，需要确认 ruby 是否已安装（Mac 电脑默认是安装的 1.8.7 版本的 ruby）

    // 查看ruby安装路径
which ruby

    // 查看ruby版本
ruby --version

    • 更换 Ruby 镜像

      1. Ruby 默认的源地址是国外网络地址，通过下面终端命令查看当前镜像地址
      gem sources -l

结果：
*** CURRENT SOURCES ***

https://rubygems.org/
      1. 首先移除当前镜像
      gem sources --remove https://rubygems.org/

结果：
https://rubygems.org/ removed from sources
      1. 然后添加国内最新 Ruby 镜像地址
      gem sources -a https://gems.ruby-china.com/

结果：
https://gems.ruby-china.com/ added to sources

    • 安装homebrew

      打开官网链接 www.cnblogs.com/wxhou/p/141…

      1. Homebrew 默认安装脚本：

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

      2. 如果你等待一段时间之后遇到下面提示，就说明无法访问官方脚本地址：

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

      3. 采用了 jsdelivr CDN 加速访问[中科大镜像源进行访问脚本文件]

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

      4. 以上方法执行期间可能会出现 git 失败[homebrew-core]

        1. 错误里面提示了下面的代码：
        git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
        1. 按照教程来 blog.csdn.net/m0_46197393…

      5. 设置镜像

        • 中科大
        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 update
        • 清华大学源
        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 update
        • 安装 node
        brew install node

        • 安装 watchman 【顺带】

        Watchman 则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）

        brew install watchman

  • Window_Android 安装 node

    nodejs.org/zh-cn/

npx切换镜像

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

npx nrm use taobao

安装 yarn

npm install -g yarn

Xcode 与 Android Studio 查看文档

CocoaPods [Mac_Ios]

CocoaPods 是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖

brew install cocoapods

项目通过 cocoapods 来安装依赖【所以最后的脚手架不是在安装 cocoapods，而是通过 cocoapods 来安装项目依赖】

安装脚手架

npx react-native init gunner --template react-native-template-typescript

  1. Installing CocoaPods dependencies 安装的是项目根目录下 ios 的依赖

  2. 如果等待太久可以直接展厅，然后再执行命令

cd ./gunner/ios && pod install

  1. 看到报错SDK "iphoneos" cannot be located

    blog.csdn.net/weixin_4298…

Window_Android 报错

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

配置环境

  • 创建一个名为 ANDROID_HOME 的环境变量

  • 找到 SDK C:\Users\你的用户名\AppData\Local\Android\Sdk

    你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是 Appearance & Behavior → System Settings → Android SDK。

  • 把一些工具目录添加到环境变量 Path

    %ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

  • 保证 jdk 在 Path 环境变量里

  • genymotion 安卓虚拟机安装

Execution failed for task ':app:installDebug'

手机里面有应用没法覆盖安装

Mac_ios报错

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

blog.csdn.net/survivorsfy…

需要开发者工具的账号【Team】

stackoverflow.com/questions/6…

Podfile文件 2021/2/7

  use_flipper!({ 'Flipper' => '0.74.0' })

规范 commit 提交

  • 安装 commitlint + husky 规范提交

    • 安装 库

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

    • commitlint.config.js 资料 文档

      第一位：0 为 disable，1 为 warning，2 为 error

      第二位：应用与否，可选 always|never

      第三位：rule 的值

      type(scope?): subject
body?
footer?

scope 指 commit 的范围（哪些模块进行了修改）

subject 指 commit 的简短描述

body 指 commit 主体内容（长描述）

footer 指 commit footer 信息
      • type-enum：类型在值中找到
      • subject-full-stop:
      • type-case：类型大小写
      • scope-empty：修改范围
      • scope-case：scope 值的情况 ....

  • 配置 package.json

    husky hoosks 根据 commitlint.config.js 配置

    lint-staged 里面加 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}": []
},

  • .cz-config.js

    'use strict';
module.exports = {
    types: [
        { value: 'feat', name: 'feat:       增加新功能' },
        { value: 'fix', name: 'fix:       修复bug' },
        { value: 'ui', name: 'ui:       更新UI' },
        { value: 'refactor', name: 'refactor:       代码重构' },
        { value: 'release', name: 'release:       发布' },
        { value: 'docs', name: 'docs:       修改文档' },
        { value: 'test', name: 'test:       增删测试' },
        { value: 'chore', name: 'chore:       更改配置文件' },
        { value: 'style', name: 'style:       代码样式修改不影响逻辑' },
        { value: 'revert', name: 'revert:       版本回退' },
        { value: 'add', name: 'add:       添加依赖' },
        { value: 'del', name: 'del:       删除代码/文件' },
        { value: 'build', name: 'del:       修改项目构建系统' },
        { value: 'perf', name: 'perf:       性能优化' },
        { value: 'breaking change', name: 'breaking change:       重大改变' },
         { value: 'types', name: 'types:       修改定义文件' }
    ],
    scopes: [],
    messages: {
        type: '选择更改类型:\n',
        scope: '请输入更改的范围:\n',
        // 如果allowcustomscopes为true，则使用
        // customScope: 'Denote the SCOPE of this change:',
        subject: '简短描述:\n',
        body: '详细描述. 使用"|"换行:\n',
        breaking: 'Breaking Changes列表:\n',
        footer: '关闭的issues列表. E.g.: #31, #34:\n',
        confirmCommit: '确认使用以上信息提交？(y)'
    },
    allowCustomScopes: true,
    allowBreakingChanges: ["feat", "fix"]
};

  • commitlint.config.js

    module.exports = {
    extends: ['@commitlint/config-conventional', "cz"],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                "release",/* 腹部 */
                "del",/* 删除代码/文件 */
                "add",/* 新增依赖 */
                "ui",/* 更新UI */
                "feat",/* 新增功能 */
                "fix",/* 修复bug */
                "docs",/* 修改文档 */
                "style",/* 代码样式修改不影响逻辑 */
                "refactor",/* 代码重构 */
                "test",/* 增删测试 */
                "chore",/* 更改配置文件 */
                "revert",/* 回滚代码 */
                "breaking change",/* 重大改变 */
                "types",/* 修改定义文件 */
                "perf",/* 性能优化 */
                "build"/* 修改项目构建工具 */
            ]
        ],
        'type-empty': [2, 'never'],
        'type-case': [0],
        'scope-empty': [0],
        'subject-full-stop': [0, 'never'],
        'subject-empty': [2, 'never'], /* 提交不符合规范时,也可以提交,但是会有警告 */
        'subject-case': [0, 'never'],
        'scope-case': [2, 'always', 'lower-case'],
        'header-max-length': [2, 'always', 72],
    }
}

安装 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

设置别名

reactnative.cn/docs/typesc…

react-native 路由导航方案

需要 xcode 重新编程 app 到设备里面

juejin.cn/post/690124…

  • React Navigation 5.x 底部 tab 栏导航@react-navigation/bottom-tabs
// TabNavigator
yarn add @react-navigation/bottom-tabs
  • React Navigation 5.x 页面路由@react-navigation/native
    • react-native-gesture-handler：用于手势切换页面。
    • react-native-screens：用于原生层释放未展示的页面，改善 app 内存使用。
    • react-native-safe-area-context： 用于保证页面显示在安全区域（主要针对刘海屏）。
    • @react-native-community/masked-view：用在头部导航栏中返回按钮的颜色设置。
    • @react-navigation/native 为 React Navigation 的核心。
// 安装react-navigation
yarn add @react-navigation/native

// 安装依赖库
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
  • React Navigation 5.x 堆栈路由@react-navigation/stack
yarn add @react-navigation/stack

重新编译 app

坑位

注意：为了使新的图片资源机制正常工作，require 中的图片名字必须是一个静态字符串（不能使用变量！因为 require 是在编译时期执行，而非运行时期执行！）reactnative.cn/docs/images

iOS pod libwebp 错误解决方案

www.jianshu.com/p/3b44a660b…

www.cnblogs.com/lude1994/p/… ---homepage 也需要修改

关于libwebp在ios上pod 不下来的解决方案

blog.csdn.net/xiangzhihon…

react-native ScorllView 中无法使用 flex：1 填充空间

blog.csdn.net/K563161969/…

android == Execution failed for task ':app:processDebugManifest'

github.com/razorpay/re…

github.com/react-nativ…

minSdkVersion=21

绝对定位不能出现在 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' 配置

react-native-video

问题：Error undefined is not an object (evaluating 'RCTVideoInstance.Contants' )

github.com/react-nativ…

本地数据持久化

以前我们都从 react-native 中导入 AsyncStorage，但是 React 官方说是要讲这个 AsyncStorage 从 react-native 中抽取出来，也就是在以后的版本中会将其从 react-native 包中删除，其建议我们从@react-native-community/async-storage 中导入这个组件

yarn add @react-native-community/async-storage
// 对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 install

重新编译 app

安装 UI 库 react-native-elements

  • 安装
yarn add react-native-elements
  • 安装 icon

如果您已经安装了 react-native-vector 图标作为项目的依赖项，则可以跳过此步骤。否则执行如下命令

yarn add react-native-vector-icons

安装 toast

yarn add react-native-root-toast@3.2.1 react-native-root-toast

在 react native> = 0.62 中，新的 LogBox 组件将影响该组件的初始化。 为了使其正常工作，我们必须像这样在您的应用中显式插入一个挂载点：

// 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>
);

github.com/magicismigh…

状态管理 mobx

www.jianshu.com/p/211c2c2c0…

www.jianshu.com/p/b3ee25857…

渐变 react-native-linear-gradient

github.com/react-nativ…

记得 pod install

网页 webview react-native-webview

github.com/react-nativ…

需要 pod install

avatar
文章
阅读
粉丝