移动开发前端UI组件【免费下载链接】kittenTricksReact Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.项目地址https://gitcode.com/gh_mirrors/ki/kittenTricks点击查看免费下载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 installyarn依据 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.tsxExpo 版基于expo-app-loading、expo-splash-screen、expo-font、expo-asset实现字体与图片的预加载任务src/app/app-loading.component.rn.tsxBare 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 与 DevelopmentkittenTricks 支持两个运行环境环境说明模块来源Production使用发布到 npm 的 Eva Design System 与 UI Kitten 模块node_modules/eva-design、node_modules/ui-kittenDevelopment使用本地克隆的 Eva 与 UI Kitten 源码仓库外同级目录eva/packages、react-native-ui-kitten/src环境配置集中在 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.jsmodule.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.jsmodule.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 本身例如调试组件实现、添加自定义组件可以切换到开发模式将 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务必保证三个仓库的目录结构如下这是 dev 环境路径解析成立的前提- / - eva - kittenTricks - react-native-ui-kitten按需安装依赖后运行yarn start:devstart: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 BundleTranspile 到 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 Bundleexpo 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-passwordSocial信息流、个人主页、资料设置系列Articles文章详情与文章列表系列Messaging会话列表与聊天界面Dashboards设置页与训练卡片系列Ecommerce商品列表、详情、购物车、支付与添加卡片最小化迁移步骤复用的方式非常直接——复制并粘贴整个屏幕文件夹即可。以 Forgot Password 屏幕为例官方给出的完整流程是把 Forgot Password 目录整体复制进你的项目安装并配置 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组合 UIextra/存放屏幕私有组件与数据例如 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 的assetBundlePatternssrc/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-outexpo build:web产出 web-build最后是屏幕复用层复制 src/layouts 下整目录 检查extra/3rd-party.ts的第三方依赖 自行补充安全区与导航。这套环境可切换、屏幕可搬运、原生与 Expo 双栖的设计正是 kittenTricks 作为 UI Kitten 官方 Demo 应用最值得借鉴的部分。赞分享移动开发前端UI组件【免费下载链接】kittenTricksReact Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.项目地址https://gitcode.com/gh_mirrors/ki/kittenTricks点击查看免费下载相关推荐OpenSandbox Server 开发指南从环境搭建、架构剖析到 Docker/Kubernetes 双运行时实战OpenSandbox Server 开发指南从环境搭建、架构剖析到 Docker/Kubernetes 双运行时实战 OpenSandbox 是一个面向 A人工智能AI 应用Agent 沙箱云原生后端代码智能体markitdown 完整实战指南1 条命令把 PPT、PDF 变成 LLM 能读的 Markdownmarkitdown 完整实战指南1 条命令把 PPT、PDF 变成 LLM 能读的 Markdown 几百页 PPT 要喂给 LLM复制粘贴表格全糊了m人工智能AI 应用MCP 服务Puppeteer 虚拟屏幕实战AddScreenParams 接口全解与多屏环境构建Puppeteer 虚拟屏幕实战AddScreenParams 接口全解与多屏环境构建 本文围绕 Puppeteer 的 AddScreenParams 接口浏览器控制测试网页爬虫开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
全拆解)
