前言

目前跨平台方面，除了Flutter 就是 React Native（RN） ，我们今天来玩转一下 RN。

前期准备

先准备 node 环境：

brew install node

可以看到如下输出：

==> Auto-updating Homebrew...
Adjust how often this is run with `$HOMEBREW_AUTO_UPDATE_SECS` or disable with
`$HOMEBREW_NO_AUTO_UPDATE=1`. Hide these hints with `$HOMEBREW_NO_ENV_HINTS=1` (see `man brew`).
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).
==> New Formulae
aklomp-base64: Fast Base64 stream encoder/decoder in C99, with SIMD acceleration
asm-lsp: Language server for NASM/GAS/GO Assembly
bulletty: Pretty feed reader (ATOM/RSS) that stores articles in Markdown files
claude-code-router: Tool to route Claude Code requests to different models and customize any request
claude-code-templates: CLI tool for configuring and monitoring Claude Code
container: Create and run Linux containers using lightweight virtual machines
container-canary: Test and validate container requirements against versioned manifests
corepack: Package acting as bridge between Node projects and their package managers
cpptrace: Simple, portable, and self-contained stacktrace library for C++11 and newer
docmd: Minimal Markdown documentation generator
doh: Stand-alone DNS-over-HTTPS resolver using libcurl
eigen@3: C++ template library for linear algebra
fake-gcs-server: Emulator for Google Cloud Storage API
filebrowser: Web File Browser
framework-tool-tui: TUI for controlling and monitoring Framework Computers hardware
gcl: GNU Common Lisp
getparty: Multi-part HTTP download manager
gitlab-ci-linter: Command-line tool to lint GitLab CI YAML files
gocheat: TUI Cheatsheet for keybindings, hotkeys and more
goclone: Website Cloner
hack-browser-data: Command-line tool for decrypting and exporting browser data
haraka: Fast, highly extensible, and event driven SMTP server
hexhog: Hex viewer/editor
intelli-shell: Like IntelliSense, but for shells
kibi: Text editor in ≤1024 lines of code, written in Rust
ktea: Kafka TUI client
magika: Fast and accurate AI powered file content types detection
mark: Sync your markdown files with Confluence pages
mcat: Terminal image, video, directory, and Markdown viewer
mysql-to-sqlite3: Transfer data from MySQL to SQLite
node@24: Open-source, cross-platform JavaScript runtime environment
openlist: New AList fork addressing anti-trust issues
openssl@1.1: Cryptography and SSL/TLS Toolkit
permify: Open-source authorization service & policy engine based on Google Zanzibar
postgres-language-server: Language Server for Postgres
qcoro6: C++ Coroutines for Qt
quint: Core tool for the Quint specification language
rails-mcp-server: MCP server for Rails applications
reddix: Reddit, refined for the terminal
rumdl: Markdown Linter and Formatter written in Rust
sqlite3-to-mysql: Transfer data from SQLite to MySQL
supabase: Open source Firebase alternative
taskline: Tasks, boards & notes for the command-line habitat
teamtype: Peer-to-peer, editor-agnostic collaborative editing of local text files
ts_query_ls: LSP implementation for Tree-sitter's query files
tscriptify: Golang struct to TypeScript class/interface converter
tuios: Terminal UI OS (Terminal Multiplexer)

You have 3 outdated formulae installed.

==> Fetching downloads for: node
==> Downloading https://ghcr.io/v2/homebrew/core/node/manifests/25.1.0_1
########################################################################## 100.0%
==> Fetching dependencies for node: brotli, c-ares, icu4c@77, libnghttp2, libnghttp3, libngtcp2, libuv, simdjson, sqlite, uvwasi, lz4, xz and zstd
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/manifests/1.2.0
########################################################################## 100.0%
==> Fetching brotli
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/blobs/sha256:c9d272f3ac33
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/c-ares/manifests/1.34.5-1
########################################################################## 100.0%
==> Fetching c-ares
==> Downloading https://ghcr.io/v2/homebrew/core/c-ares/blobs/sha256:c152939c8cbf
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/77/manifests/77.1
########################################################################## 100.0%
==> Fetching icu4c@77
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/77/blobs/sha256:54d609febe
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/libnghttp2/manifests/1.68.0
########################################################################## 100.0%
==> Fetching libnghttp2
==> Downloading https://ghcr.io/v2/homebrew/core/libnghttp2/blobs/sha256:b848ec2c
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/libnghttp3/manifests/1.12.0
########################################################################## 100.0%
==> Fetching libnghttp3
==> Downloading https://ghcr.io/v2/homebrew/core/libnghttp3/blobs/sha256:81311931
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/libngtcp2/manifests/1.17.0
########################################################################## 100.0%
==> Fetching libngtcp2
==> Downloading https://ghcr.io/v2/homebrew/core/libngtcp2/blobs/sha256:279e17de0
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/libuv/manifests/1.51.0-1
########################################################################## 100.0%
==> Fetching libuv
==> Downloading https://ghcr.io/v2/homebrew/core/libuv/blobs/sha256:89296bb1520f6
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/simdjson/manifests/4.2.1
########################################################################## 100.0%
==> Fetching simdjson
==> Downloading https://ghcr.io/v2/homebrew/core/simdjson/blobs/sha256:c1499dc97a
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/sqlite/manifests/3.51.0
########################################################################## 100.0%
==> Fetching sqlite
==> Downloading https://ghcr.io/v2/homebrew/core/sqlite/blobs/sha256:643e8196600c
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/uvwasi/manifests/0.0.23-1
########################################################################## 100.0%
==> Fetching uvwasi
==> Downloading https://ghcr.io/v2/homebrew/core/uvwasi/blobs/sha256:74534d557b06
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/lz4/manifests/1.10.0-1
########################################################################## 100.0%
==> Fetching lz4
==> Downloading https://ghcr.io/v2/homebrew/core/lz4/blobs/sha256:c30d8dad4decfc0
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/xz/manifests/5.8.1
########################################################################## 100.0%
==> Fetching xz
==> Downloading https://ghcr.io/v2/homebrew/core/xz/blobs/sha256:ce65e4c93e377bef
########################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/zstd/manifests/1.5.7-1
########################################################################## 100.0%
==> Fetching zstd
==> Downloading https://ghcr.io/v2/homebrew/core/zstd/blobs/sha256:873feb2d747bb2
########################################################################## 100.0%
==> Fetching node
==> Downloading https://ghcr.io/v2/homebrew/core/node/blobs/sha256:bc3d4077b6fa78
########################################################################## 100.0%
==> Installing dependencies for node: brotli, c-ares, icu4c@77, libnghttp2, libnghttp3, libngtcp2, libuv, simdjson, sqlite, uvwasi, lz4, xz and zstd
==> Installing node dependency: brotli
==> Downloading https://ghcr.io/v2/homebrew/core/brotli/manifests/1.2.0
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/43040be3ccb15626fbea32e35b07134720b9790ad66caf27be03edac1dfbfeb2--brotli-1.2.0.bottle_manifest.json
==> Pouring brotli--1.2.0.sonoma.bottle.tar.gz
  /usr/local/Cellar/brotli/1.2.0: 33 files, 1.8MB
==> Installing node dependency: c-ares
==> Downloading https://ghcr.io/v2/homebrew/core/c-ares/manifests/1.34.5-1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/c52b1c91460667312755a235f78ac192a45bff39befbba6da9aa72a17263c559--c-ares-1.34.5-1.bottle_manifest.json
==> Pouring c-ares--1.34.5.sonoma.bottle.1.tar.gz
  /usr/local/Cellar/c-ares/1.34.5: 176 files, 945.3KB
==> Installing node dependency: icu4c@77
==> Downloading https://ghcr.io/v2/homebrew/core/icu4c/77/manifests/77.1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/35ec2c3adb94255ba47424a4334da9616d97e1ec6d59ed907b368535018bed0a--icu4c@77-77.1.bottle_manifest.json
==> Pouring icu4c@77--77.1.sonoma.bottle.tar.gz
  /usr/local/Cellar/icu4c@77/77.1: 277 files, 80MB
==> Installing node dependency: libnghttp2
==> Downloading https://ghcr.io/v2/homebrew/core/libnghttp2/manifests/1.68.0
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/16e7ebe81106c5b0b363cf16b9a25118a344811cd317e5042943682b17675a76--libnghttp2-1.68.0.bottle_manifest.json
==> Pouring libnghttp2--1.68.0.sonoma.bottle.tar.gz
 /usr/local/Cellar/libnghttp2/1.68.0: 14 files, 735.9KB
==> Installing node dependency: libnghttp3
==> Downloading https://ghcr.io/v2/homebrew/core/libnghttp3/manifests/1.12.0
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/870c7405e7536d3964d6a4063f552f6ba7db08a1057381685a9f9c177df71c9f--libnghttp3-1.12.0.bottle_manifest.json
==> Pouring libnghttp3--1.12.0.sonoma.bottle.tar.gz
 /usr/local/Cellar/libnghttp3/1.12.0: 20 files, 554.3KB
==> Installing node dependency: libngtcp2
==> Downloading https://ghcr.io/v2/homebrew/core/libngtcp2/manifests/1.17.0
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/f9ac96017064e1c9c23c32050e1fedb487cd3f6a744fc6c8bfd3a3ee8fa90605--libngtcp2-1.17.0.bottle_manifest.json
==> Pouring libngtcp2--1.17.0.sonoma.bottle.tar.gz
  /usr/local/Cellar/libngtcp2/1.17.0: 21 files, 1.2MB
==> Installing node dependency: libuv
==> Downloading https://ghcr.io/v2/homebrew/core/libuv/manifests/1.51.0-1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/3134253b57ab9327739c97027f8b90160da109e06dda0dc4d2d222a6df0ab9b8--libuv-1.51.0-1.bottle_manifest.json
==> Pouring libuv--1.51.0.sonoma.bottle.1.tar.gz
  /usr/local/Cellar/libuv/1.51.0: 34 files, 1.2MB
==> Installing node dependency: simdjson
==> Downloading https://ghcr.io/v2/homebrew/core/simdjson/manifests/4.2.1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/346ea6428cf23cfe5c9cf9aa74ba48ce2cf6858f68b5287036d6b8bb09ab76ef--simdjson-4.2.1.bottle_manifest.json
==> Pouring simdjson--4.2.1.sonoma.bottle.tar.gz
  /usr/local/Cellar/simdjson/4.2.1: 17 files, 6.4MB
==> Installing node dependency: sqlite
==> Downloading https://ghcr.io/v2/homebrew/core/sqlite/manifests/3.51.0
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/8465785061e36b7a1fc885b00fc23949c696b13d8b9569ea685ae294b6f57fd4--sqlite-3.51.0.bottle_manifest.json
==> Pouring sqlite--3.51.0.tahoe.bottle.tar.gz
  /usr/local/Cellar/sqlite/3.51.0: 13 files, 4.9MB
==> Installing node dependency: uvwasi
==> Downloading https://ghcr.io/v2/homebrew/core/uvwasi/manifests/0.0.23-1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/d9fc39e8e8eb3c4e33b14bafb8f46ce7c30a8814a9d2ff809f4a27525ec96893--uvwasi-0.0.23-1.bottle_manifest.json
==> Pouring uvwasi--0.0.23.sonoma.bottle.1.tar.gz
  /usr/local/Cellar/uvwasi/0.0.23: 15 files, 257.0KB
==> Installing node dependency: lz4
==> Downloading https://ghcr.io/v2/homebrew/core/lz4/manifests/1.10.0-1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/8e11e90eb21a06e0f199af9d80e011e3693c77dd353b2477579d95c8471a5802--lz4-1.10.0-1.bottle_manifest.json
==> Pouring lz4--1.10.0.tahoe.bottle.1.tar.gz
 /usr/local/Cellar/lz4/1.10.0: 24 files, 696.2KB
==> Installing node dependency: xz
==> Downloading https://ghcr.io/v2/homebrew/core/xz/manifests/5.8.1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/86a115cc1d43ff8a480fd907f812e70a403e1675d8a7223f61bbb08cbd2adc27--xz-5.8.1.bottle_manifest.json
==> Pouring xz--5.8.1.tahoe.bottle.tar.gz
  /usr/local/Cellar/xz/5.8.1: 96 files, 2.3MB
==> Installing node dependency: zstd
==> Downloading https://ghcr.io/v2/homebrew/core/zstd/manifests/1.5.7-1
Already downloaded: /Users/mac/Library/Caches/Homebrew/downloads/14f45413747fef87558cd195b1104e55d9739f9574f146051dbd6569ded74a94--zstd-1.5.7-1.bottle_manifest.json
==> Pouring zstd--1.5.7.tahoe.bottle.1.tar.gz
  /usr/local/Cellar/zstd/1.5.7: 32 files, 2.4MB
==> Installing node
==> Pouring node--25.1.0_1.sonoma.bottle.tar.gz
 /usr/local/Cellar/node/25.1.0_1: 2,269 files, 78.4MB
==> Running `brew cleanup node`...
Disable this behaviour by setting `HOMEBREW_NO_INSTALL_CLEANUP=1`.
Hide these hints with `HOMEBREW_NO_ENV_HINTS=1` (see `man brew`).
==> Caveats
zsh completions have been installed to:
  /usr/local/share/zsh/site-functions

开始

运行 expo 工程：

npx create-expo-app@latest

expo 工程是现在 rn 推荐的创建 app 的方式，他的演进经历了如下过程：

输入工程名字，可以看到如下结果：

打开目录，可以看到如下结构：

其中 app 目录是我们的工作目录：

对这个文件的介绍：

1. _layout.tsx​ 是各级页面的容器或导航控制器，控制着子页面的呈现方式（是堆叠、标签还是模态）。
2. 其他 .tsx文件就是具体的页面内容，相当于 UIViewController。
3. index.tsx​ 是一个特殊文件，它代表所在目录的默认页面（路径为 /）。

集成现有项目

更改项目目录

rn 的目录遵循一定的结构，我们最好按他的约定来组织目录：

masterboy git:(master) ✗ tree -I 'node_modules|.git' -L 2 -a
.
├── .gitee
│   ├── ISSUE_TEMPLATE.zh-CN.md
│   └── PULL_REQUEST_TEMPLATE.zh-CN.md
├── .gitignore
├── .vscode
│   └── settings.json
├── .xcode.env
├── .xcode.env.local
├── ios
│   ├── .DS_Store
│   ├── .xcode.env
│   ├── .xcode.env.local
│   ├── bin
│   ├── build
│   ├── build_info
│   ├── cache
│   ├── doc
│   ├── extensions
│   ├── Gemfile
│   ├── Gemfile.lock
│   ├── gems
│   ├── LICENSE
│   ├── MasterBoy
│   ├── MasterBoy.xcodeproj
│   ├── MasterBoy.xcworkspace
│   ├── Podfile
│   ├── Podfile.lock
│   ├── Pods
│   ├── README.en.md
│   ├── README.md
│   └── specifications
├── package-lock.json
└── package.json

参考官方教程：Integration with Existing Apps 即可。

前置工作

下载 package.json 并运行 npm install 安装脚手架。

curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.82-stable/template/package.json
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1171  100  1171    0     0     34      0  0:00:34  0:00:33  0:00:01   311

然后：

masterboy git:(master) ✗ npm install
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 835 packages, and audited 836 packages in 4m

158 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

管理 ruby 版本

先下载：

masterboy git:(master) curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.82-stable/template/Gemfile
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   510  100   510    0     0     93      0  0:00:05  0:00:05 --:--:--   109

再执行：

bundle install

bundle exec pod install

需要注意的是，后续的 pod install 都通过 bundle exec pod install命令