React Native 使用 Repack 创建项目(1)

react-native, coding, repack

1. 创建项目 #

最近在使用 Repack 创建 react native 项目。

由于 react native 项目都默认是 yarn 的支持更好,但是我想要使用 pnpm 初始化这个项目,即:

# repack 5.0.5
pnpm dlx @callstack/repack-init

2. 安装依赖 #

创建完之后使用 pnpm i 安装以来之后,启动项目会失败,缺少了很多依赖,需要自行安装依赖才行。

缺少了以下依赖:

@react-native/gradle-plugin
@react-native/codegen
babel-plugin-syntax-hermes-parser
@babel/plugin-syntax-typescript
@react-native/babel-plugin-codegen

之后使用 pnpm add -D 安装这些依赖就行了。

3. 运行 #

1. Android #
pnpm android
2. iOS #
# 安装 cocoapods 依赖
pnpm dlx pod-install

# 运行
pnpm ios

4. QA #

1. 使用 Android Studio 打开 android 目录出现 Cannot run program "node" 异常时怎么解决? #

(1)查询 node 指令位置

which node

(2)替换 node_modules/@callstack/repack/android/build.gradle 中的 node 指令

- commandLine("node", "--print", "require.resolve('react-native/package.json')")
# 比如 node 位置是 /usr/local/bin/node
+ commandLine("/usr/local/bin/node", "--print", "require.resolve('react-native/package.json')")
2. 出现 Missing ExternalProject for : 异常? #

替换 android/settings.gradle 中的如下内容:

- pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+ pluginManagement { includeBuild(file('../node_modules/@react-native/gradle-plugin').toPath().toRealPath().toAbsolutePath().toString()) }

- includeBuild('../node_modules/@react-native/gradle-plugin')
+ includeBuild(file('../node_modules/@react-native/gradle-plugin').toPath().toRealPath().toAbsolutePath().toString())




参考文档 #