最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

自定义 React Native Template

开发工具 onlyling 675浏览

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

创建基础模板

新建模板文件夹。

## 创建项目文件夹
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-nativeinit 命令更多说明请查看文档

创建模板配置文件

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 相关字符串弄丢,避免创建项目的时候无法正确替换。

剩下的事就是把 templatetemplate.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