学习笔记

安装

# 我这里使用 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

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

ios

初始化项目

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

$ 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, 运行成功

Android 运行

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

项目体积大小对比

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 趋势的对比

百度指数

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 的版本管理工具

$ 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

这个错误指的是注入到 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 软链到标准的路径

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

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

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

---

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