学习笔记

安装

1
2
3
4
5
6
7
8
# 我这里使用 pnpm 管理 node , 所以没使用 brew 安装
$ brew install node

# watchman
$ brew install watchman

# cocoapods 使用 brew 安装, react-native 可能无法识别, 导致
$ gem install cocoapods

Java 环境

MacOS 上使用 brew 安装管理Java环境或组件

yarn

这里一定不要全局安装 reactive-native-cli

1
$ yarn global remove react-native-cli @react-native-community/cli

ios

初始化项目

初始化之前一定要启用代理, 否则可能出现无法安装 cocoapods 的三方包, 导致项目初始化失败

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$ npx react-native init ios_get_started
...

Welcome to React Native!
Learn once, write anywhere

✔ Downloading template
✔ Copying template
✔ Processing template
ℹ Installing dependencies
✔ CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you want to install it? › Yes, with gem (may require sudo)
✔ Installing CocoaPods
✔ Installing Bundler
✔ Installing CocoaPods dependencies (this may take a few minutes)


Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "/Users/duoli/Documents/workbench/lang/reactive-native/get_started" && npx react-native run-android

Run instructions for iOS:
• cd "/Users/duoli/Documents/workbench/lang/reactive-native/get_started" && npx react-native run-ios
- or -
• Open get_started/ios/get_started.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button

Run instructions for macOS:
• See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.

运行

IOS 运行

使用 xcode 打开, 运行, 解决掉相关的 FAQ, 运行成功
image.png

Android 运行

打开 android studio, 等待运行了一堆下载之后, 运行如下, 还是比较顺利的
image.png

image.png

项目体积大小对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
2.5G	.
314M ./node_modules # node_modules, 使用 yarn 安装的包
1.8G ./ios # ios 包
168M ./ios/Pods/boost
1.4G ./ios/Pods/hermes-engine # js 编译引擎
169M ./ios/Pods/Flipper-Boost-iOSX
1.8G ./ios/Pods
224K ./ios/build
26M ./vendor
344M ./android # android 项目
343M ./android/app/build
343M ./android/app
26M ./vendor/bundle
4.0K ./__tests__

Google 趋势的对比
image.png
百度指数
image.png

FAQ

TypeError: cli.init is not a function for react native

一定不要全局安装 react-native

参考 —- 搭建开发环境 · React Native 中文网

Your Ruby version is 3.1.3, but your Gemfile specified 2.7.5

安装 rvm, ruby 的版本管理工具

1
2
$ rvm install ruby-2.7.5
$ rvm use 2.7.5

CocoaPods (https://cocoapods.org/)) is not installed.

CocoaPods (https://cocoapods.org/)) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you want to install it?

iOS : Command PhaseScriptExecution failed with a nonzero exit code

image.png

这个错误指的是注入到 Xcode 构建中的 codegen 脚本过早退出。您可能会在自己的库或 RN 核心库之一 (FBReactNativeSpec, rncore) 中看到这个错误。
打开 ~/Library/Developer/Xcode/DerivedData,查找名称为 Xcode 工作区 (“RNTesterPods-AAAA”,其中 “AAAA” 是一串字符) 的文件夹。在该文件夹中,转到 Build→Intermediates.noindex→Pods.build→Debug-iphonesimulator (如果适用,可以替换为适用于自己的 iOS 设备)。在里面,查找名称为 codegen 库的脚本错误的文件夹。脚本阶段的日志可以在 DerivedSources 文件夹中找到,文件名为 codegen-LibraryName.log。该日志输出应提供有关错误源的信息。
我这里输出的错误内容是
{project-name}/ios/Pods/../../node_modules/react-native/React/FBReactNativeSpec/../../scripts/react_native_pods_utils/script_phases.sh: line 22: [Codegen] [Error] Could not find node. It looks like that the .xcode.env or .xcode.env.local : command not found

参考方法 - https://stackoverflow.com/questions/44492197/react-native-ios-build-cant-find-node

将 node 软链到标准的路径

1
$ ln -s $(which node) /usr/local/bin/node

Port 8081 already in use, packager is either not running or not running correctly

查找本地的端口, 给 8081 出让出来, 不要占用这个端口


语雀镜像 : 学习笔记 ,点此 提问

作者

Duoli

发布于

2022-12-14

更新于

2022-12-15

许可协议

评论