企业官网建设流程全解析

• 移动开发
• 前端
• UI组件

kittenTricks 是一个基于 React Native 的移动应用 Starter Kit，内置 40+ 屏示例，涵盖认证、社交、电商、仪表盘等完整业务场景。本文围绕仓库根目录的 DEV_DOCS.md 展开，系统讲解依赖安装、Metro 启动、Expo 运行、Production/Development 双环境切换、TypeScript 与 Web 打包，以及如何把src/layouts下的屏幕整体复用到你自己的项目中。读完本文，你将掌握这套模板从"跑起来"到"拆走用"的完整链路，并理解其环境切换背后的源码级原理。

运行 kittenTricks：从安装依赖到设备启动

安装并链接依赖

按官方开发文档，运行应用之前需要先安装并链接应用依赖。在项目根目录执行：

yarn && npx react-native link && cd ios && pod install

• yarn依据 package.json 安装全部依赖。该仓库依赖较多且版本固定，例如 React Native~0.63.4、@ui-kitten/components5.1.0、expo^40.0.0、React Navigation 5.x 等，安装耗时较长属正常现象。
• npx react-native link会把 react-native.config.js 中声明的静态资源链接进原生工程。该配置声明了三类资产：src/assets/images/*、src/assets/fonts以及src/layouts/**/assets/*，也就是说每个可复用屏幕目录下的assets都会被纳入原生资源。
• cd ios && pod install用于安装 iOS 侧 CocoaPods 依赖（前提是本机已安装 CocoaPods）。仓库提供了 ios/Podfile 与 ios/Podfile.lock，锁定的版本可直接复现。

默认情况下，kittenTricks 以一个常规 React Native 应用的方式启动；如果需要以 Expo 方式运行，参见下文"使用 Expo 运行"一节。

启动 Metro 并运行到设备

yarn start # 启动 Metro Bundler yarn ios # 运行到 iOS 模拟器 yarn android # 运行到 Android 模拟器/真机

这三个命令由 package.json 的 scripts 定义，底层分别是npm run env -- prod && react-native start与react-native run-ios/react-native run-android。注意：yarn start在启动 Metro 之前会先执行一次环境切换（prod），这保证了打包时解析到的是 npm 发布的 UI Kitten / Eva 模块，其细节在"双环境体系"一节详述。

应用的 JS 入口是 index.js：它通过AppRegistry.registerComponent('KittenTricks', ...)注册根组件 App.ts，并在 Web 平台（Platform.OS === 'web'）下额外调用AppRegistry.runApplication挂载到#root/#main节点，说明同一套代码也具备 Web 运行能力。

使用 Expo 运行：.expo扩展名的平台分流机制

在项目根目录执行：

expo start

该命令会启动一个本地 Expo 开发服务器，并输出在 iOS、Android 或 Web 上运行应用的选项（扫码或按键）。作为对比，官方文档明确说明：当以 Expo 方式运行时，本仓库的ios和android原生目录不再需要，纯 JS 即可驱动整个应用。

更重要的一点是：同一份业务逻辑，在 Expo 与 Bare React Native 下可能要有不同的实现。kittenTricks 的解决方案是利用.expo文件扩展名做平台分流：

• src/app/app-loading.component.expo.tsx：Expo 版，基于expo-app-loading、expo-splash-screen、expo-font、expo-asset实现字体与图片的预加载任务；
• src/app/app-loading.component.rn.tsx：Bare RN 版，字体与资产加载任务直接打印警告并返回空 Promise，因为原生工程已通过 react-native.config.js 静态链接了资源；
• src/app/app-loading.component.tsx：桥接文件，通过Constants.platform（来自expo-constants）判断运行环境，再导出对应实现。

仓库里同构拆分的还有 splash-image.component.tsx（对应.expo/.rn两个变体）、app-info.service.ts、app-reload.service.ts 与 web-browser.service.ts。这种"公共接口 +.expo/.rn双实现"的模式，正是 Expo 官方为兼容 Bare 与 Client 项目推荐的做法，可以直接复用到你自己的跨平台项目里。

双环境体系：Production 与 Development

kittenTricks 支持两个运行环境：

环境配置集中在 env 目录，包含两组文件：

• .env.js文件（env.prod.js、env.dev.js、env.ci.js），用于定位环境相关的模块路径；
• 各环境对应的 tsconfig 文件（tsconfig.prod.json、tsconfig.dev.json、tsconfig.ci.json），用于配置 TypeScript 的模块别名。

手动切换环境只需执行yarn env prod或yarn env dev。

环境切换的源码级原理

环境切换由 env/set-env.js 完成，逻辑非常简洁：

const envArgument = process.argv.splice(2)[0]; const envConfigFile = path.resolve(__dirname, `../env/env.${envArgument}.js`); const envTsConfigFile = path.resolve(__dirname, `../env/tsconfig.${envArgument}.json`); fs.copyFileSync(envConfigFile, '../env/index.js'); fs.copyFileSync(envTsConfigFile, '../tsconfig.json');

即：把env/env.<name>.js复制为env/index.js，把env/tsconfig.<name>.json复制为根目录的tsconfig.json。随后，babel.config.js 与 metro.config.js 都会require('./env')读取这份"当前环境"的路径配置：

• babel 侧：babel-plugin-module-resolver依据 babel.config.js 中的 alias 表，把@eva-design/dss、@eva-design/eva、@ui-kitten/components等包名解析到env指定的路径；
• Metro 侧：metro.config.js 把这些模块目录追加到watchFolders（让 Metro 监听本地源码目录的变更），并把react、react-native、date-fns、moment等依赖通过extraNodeModules显式映射到项目自己的node_modules，避免本地源码解析依赖时版本错乱。

再看两份 env 文件的具体差异。生产环境 env/env.prod.js：

module.exports = { ENV: 'prod', UI_KITTEN_PACKAGES_PATH: path.resolve(__dirname, '../node_modules/@ui-kitten'), EVA_PACKAGES_PATH: path.resolve(__dirname, '../node_modules/@eva-design'), };

开发环境 env/env.dev.js：

module.exports = { ENV: 'dev', UI_KITTEN_PACKAGES_PATH: path.resolve(__dirname, '../../react-native-ui-kitten/src'), EVA_PACKAGES_PATH: path.resolve(__dirname, '../../eva/packages'), };

可以看到，dev 环境的路径指向仓库外部的同级目录，这正是下面开发模式工作流的前提。

Production 模式

yarn start

等价于先npm run env -- prod再react-native start，即始终以 npm 上发布的 UI Kitten / Eva 模块运行，适合日常体验与真机演示。

Development 模式：本地联动 UI Kitten 与 Eva 源码

如果你要修改 UI Kitten 或 Eva 本身（例如调试组件实现、添加自定义组件），可以切换到开发模式：

1. 将 Eva Design System 与 react-native-ui-kitten 克隆到包含 kittenTricks 的目录中：

git clone https://github.com/eva-design/eva git clone https://github.com/akveo/react-native-ui-kitten

2. 务必保证三个仓库的目录结构如下（这是 dev 环境路径解析成立的前提）：

- / - eva - kittenTricks - react-native-ui-kitten

3. 按需安装依赖后，运行：

yarn start:dev

start:dev由 package.json 定义为npm run env -- dev && react-native start --reset-cache：先切到 dev 环境，再以--reset-cache清空 Metro 缓存启动。结合前文的 env/env.dev.js 与 env/tsconfig.dev.json 可以看到，dev 模式下@eva-design/*、@ui-kitten/*、@kitten/*三类别名全部指向本地源码，改完本地 UI Kitten 源码即可热重载看到效果。

此外仓库还提供了 CI 环境（env/env.ci.js 与 env/tsconfig.ci.json），将模块路径指向仓库内packages-ci目录，用于在持续集成中构建未被发布到 npm 的最新模块，思路与 dev 环境一致。

构建产物：TypeScript 转译与 Web Bundle

Transpile 到 JavaScript

项目使用 TypeScript 构建。执行：

yarn build

底层命令是tsc -p ./tsconfig.json（见 package.json）。编译产物（.js文件）输出到 dist/tsc-out 目录。当前环境的 tsconfig 由yarn env切换而来，例如 dev 环境对应 env/tsconfig.dev.json，其paths会把@eva-design/*、@ui-kitten/*、@kitten/*映射到本地源码；生产环境 env/tsconfig.prod.json 则无paths，直接从node_modules/@types与包声明解析。

需要特别强调的是：不要把dist/tsc-out的输出当作可复用屏幕的源码。屏幕复用应直接使用 src/layouts 下的 TypeScript 源码（见下一节），转译产物仅用于构建验证。

Web Bundle

expo build:web

该命令在项目根目录执行（也可通过yarn build:web调用），产物输出到 web-build 目录。它依赖expo-cli、@expo/webpack-config与react-native-web（三者均已在 package.json 的 devDependencies/dependencies 中声明）。配合 app.json 中声明的ios、android、web三个平台，kittenTricks 可以用同一份代码产出原生应用与可部署的静态 Web 站点。

复用屏幕：把 40+ 布局搬进你自己的项目

这是 DEV_DOCS 中最具实战价值的部分。kittenTricks 的全部可复用屏幕都集中在 src/layouts 目录，按业务类别组织为六个子目录：

• Auth：登录/注册/忘记密码系列（sign-in-1 到 sign-in-5、sign-up-1 到 sign-up-4、forgot-password）
• Social：信息流、个人主页、资料设置系列
• Articles：文章详情与文章列表系列
• Messaging：会话列表与聊天界面
• Dashboards：设置页与训练卡片系列
• Ecommerce：商品列表、详情、购物车、支付与添加卡片

最小化迁移步骤

复用的方式非常直接——复制并粘贴整个屏幕文件夹即可。以 Forgot Password 屏幕为例，官方给出的完整流程是：

1. 把 Forgot Password 目录整体复制进你的项目；
2. 安装并配置 3rd-party.ts 文件中列出的第三方模块。

3rd-party.ts文件是屏幕的第三方依赖清单，里面用require(...)惰性加载外部模块。例如 Forgot Password 的 3rd-party.ts 导出了一个KeyboardAvoidingView，其实现基于react-native-keyboard-aware-scroll-view，并注入了默认的滚动行为（bounces: false、enableOnAndroid: true等），因此复用该屏幕前需要在你的项目中安装这个库：

yarn add react-native-keyboard-aware-scroll-view

其他业务屏幕的3rd-party.ts依赖各不相同（如 sign-in-1/extra/3rd-party.ts、add-new-card/extra/3rd-party.ts），复制屏幕后请逐一检查对应目录下的该文件。

屏幕结构与内部组成

官方文档规定每个屏幕的目录结构完全一致：

forgot-password/ ├── index.tsx # 屏幕本身 ├── extra/ # 组件、数据与第三方模块 │ ├── 3rd-party.ts │ ├── icons.tsx │ └── image-overlay.component.tsx └── assets/ # 屏幕使用的资源 └── image-background.jpg

对照 src/layouts/auth/forgot-password 的真实实现：

• index.tsx是屏幕本体，默认导出一个接收navigation属性的组件，内部使用 UI Kitten 的Input、Button、Text与自封装的ImageOverlay组合 UI；
• extra/存放屏幕私有组件与数据，例如 image-overlay.component.tsx 在ImageBackground上叠加一层默认rgba(0, 0, 0, 0.45)的遮罩，这是多个 Auth 屏幕共用的背景处理组件；
• assets/只放该屏幕自己的图片资源。

复用时的两个关键注意事项

其一，可复用屏幕源码不包含 headers、safe areas 和 navigation 逻辑。查看 src/scenes/auth/forgot-password.component.tsx 可以发现，导航场景层（scenes）只是薄薄一层包装：

export const ForgotPasswordScreen = ({ navigation }) => ( <ContentView navigation={navigation}/> );

即：src/layouts/...提供纯 UI 内容，导航框架、顶部导航栏与安全区都由更外层的scenes、navigation目录负责。因此当你把屏幕复制到自己的项目后，需要自行补充这三块逻辑。仓库中可供参考的现成实现包括：

• 安全区处理：基于react-native-safe-area-context的 safe-area-layout.component.tsx；
• 导航头/顶部导航：UI Kitten 的 TopNavigation 组件用法可参考 top-navigation.component.tsx 与 home-drawer.component.tsx；
• 完整导航结构：见 navigation 目录下的*.navigator.tsx系列文件。

其二，别忘了资源链接。屏幕自带assets/目录，在 Bare RN 工程中它们由react-native link或react-native.config.js的 assets 声明负责打包；在 Expo 工程中则由 app.json 的assetBundlePatterns（"src/layouts/**/assets/*"）纳入。复制屏幕后请确认你的工程已覆盖对应目录。

小结

梳理一下本文的完整知识链：运行层（yarn+ link + pod install →yarn start/yarn ios/yarn android）与 Expo 层（expo start，借助.expo扩展名实现双实现分流）；环境层（yarn env prod|dev通过 env/set-env.js 复制配置，联动 Babel、Metro 与 TypeScript 的模块解析，实现 npm 包与本地源码两套来源的切换）；构建层（yarn build产出 dist/tsc-out，expo build:web产出 web-build）；最后是屏幕复用层（复制 src/layouts 下整目录 + 检查extra/3rd-party.ts的第三方依赖 + 自行补充安全区与导航）。这套"环境可切换、屏幕可搬运、原生与 Expo 双栖"的设计，正是 kittenTricks 作为 UI Kitten 官方 Demo 应用最值得借鉴的部分。

• 移动开发
• 前端
• UI组件