自定义 React Native Template

每次使用默认模板创建项目都要做大量的改动，萌生做一个自有的模板。

创建基础模板

新建模板文件夹。

## 创建项目文件夹
mkdir react-native-diy-template

## 最后会把模板上传到 NPM
cd ./react-native-diy-template
yarn init

使用默认的 typescript 模板作为基础。

## 在官方模板的基础上修改
npx react-native init ProjectName --template react-native-template-typescript --skip-install

## 初始化好后把 ProjectName 文件夹改名为 template

部分参数说明

• init：生成项目的文件夹名称，同时也是 iOS、Android 等原生工程的项目名称

• --template：指定模板，支持 NPM 包、本地绝对路径文件夹（压缩包）、GitHub repository (supports username/repo format)

• --skip-install：初始化完成后不安装 node_modules 依赖、pod 依赖

实测 GitHub repository (supports username/repo format) 方式可能行不通。

react-native 的 init 命令更多说明请查看文档。

创建模板配置文件

在 ProjectName 文件夹根目录创建 template.config.js 文件。

type Template = {
  // Placeholder used to rename and replace in files
  // package.json, index.json, android/, ios/
  placeholderName: string;
  // Directory with template
  templateDir: string;
  // Path to script, which will be executed after init
  postInitScript?: string;
  // Placeholder used to rename app title inside values.xml and Info.plist
  titlePlaceholder?: string;
};

module.exports = {
  placeholderName: 'ProjectName', // 初始化过程会把所有 ProjectName 字符串替换为 init 参数的值
  templateDir: './template',
};

自定义配置

以自定义模板为基础创建项目，模板指定本地绝对路径文件夹。

npx react-native init MyApp --template /your/path/to/template

修修改改以后把对应的文件、代码同步回 react-native-diy-template/template 文件夹内，注意不要把 ProjectName 相关字符串弄丢，避免创建项目的时候无法正确替换。

剩下的事就是把 template、template.config.js 两个文件发布到 NPM，--template 指定为对应的包名。

React Native Lidong Template

这是我们团队使用的基础模板，已经配置好 ESLint、prettier、@apollo/client、@fruits-chain/react-native-xiaoshu、环境变量、启动页、应用升级提示、fastlane 等，开箱即用。

可以关注该仓库：https://github.com/hjfruit/react-native-lidong-template

npx react-native init MyApp --template @fruits-chain/react-native-lidong-template

转载请注明：OnlyLing - Web 前端开发者 » 自定义 React Native Template