学习 reactNative 记录
安装环境
注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！
安装 node
-
Mac_IOS先安装homebrewMacOS上的包管理工具,homebrew是ruby开发的，需要确认ruby是否已安装（Mac 电脑默认是安装的 1.8.7 版本的 ruby）// 查看ruby安装路径 which ruby 复制代码// 查看ruby版本 ruby --version 复制代码-
更换 Ruby 镜像
- Ruby 默认的源地址是国外网络地址，通过下面终端命令查看当前镜像地址
gem sources -l 结果： *** CURRENT SOURCES *** https://rubygems.org/ 复制代码- 首先移除当前镜像
gem sources --remove https://rubygems.org/ 结果： https://rubygems.org/ removed from sources 复制代码- 然后添加国内最新 Ruby 镜像地址
gem sources -a https://gems.ruby-china.com/ 结果： https://gems.ruby-china.com/ added to sources 复制代码 -
打开官网链接 www.cnblogs.com/wxhou/p/141…
-
Homebrew 默认安装脚本：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 复制代码 -
如果你等待一段时间之后遇到下面提示，就说明无法访问官方脚本地址：
curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused 复制代码 -
采用了 jsdelivr CDN 加速访问[中科大镜像源进行访问脚本文件]
/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)" 复制代码 -
以上方法执行期间可能会出现 git 失败[homebrew-core]
- 错误里面提示了下面的代码：
git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow 复制代码 -
设置镜像
- 中科大
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
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
复制代码-
Installing CocoaPods dependencies 安装的是项目根目录下 ios 的依赖
-
如果等待太久可以直接展厅，然后再执行命令
cd ./gunner/ios && pod install
复制代码-
看到报错
SDK "iphoneos" cannot be located
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
复制代码需要开发者工具的账号【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 复制代码 -
第一位：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
复制代码设置别名
react-native 路由导航方案
需要 xcode 重新编程 app 到设备里面
- 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.cnblogs.com/lude1994/p/… ---homepage 也需要修改
关于libwebp在ios上pod 不下来的解决方案
react-native ScorllView 中无法使用 flex：1 填充空间
android == Execution failed for task ':app:processDebugManifest'
minSdkVersion=21
绝对定位不能出现在 scrollview
react-native-image-crop-picker android
stackoverflow.com/questions/6…
stackoverflow.com/questions/6…
ndkVersion '22.0.7026061' 配置
react-native-video
问题：Error undefined is not an object (evaluating 'RCTVideoInstance.Contants' )
本地数据持久化
以前我们都从 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>
);
复制代码状态管理 mobx
渐变 react-native-linear-gradient
记得 pod install
网页 webview react-native-webview
需要 pod install
