React Native Elements 跨平台演示应用实战基于 Expo 与 React Native Web 的运行、构建与部署指南【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements导读本文以 React Native Elements 仓库中的 example/README.md 为核心指南系统讲解该演示应用Demo App的定位、本地运行、Web 部署与 Expo 弹出Eject全流程。演示应用是 React Native ElementsRNE官方组件库的活文档覆盖 Avatars、Buttons、Cards、Inputs、Overlay 等 30 余个组件场景并同时运行在 iOS、Android 与 Web 三个平台。读完本文你将掌握如何在 monorepo 中一键启动这套跨平台演示应用、将其构建为可静态托管的 Web 站点并理解其底层基于 Expo、React Native Web 与rneui/themed主题系统的工程实现。一、Demo App 的定位组件库的可运行文档仓库中的example目录是一个独立命名空间react-native-elements-app的 Expo 应用见 example/package.json其核心用途是演示 React Native Elements 提供的各类开箱即用 UI 组件让开发者不必读代码就能看到每个组件的真实运行效果。该应用基于两个关键技术栈Expo负责统一封装 iOS / Android 原生构建链路降低一次编写、随处运行的成本React Native Web让同一套 React Native 代码可以在 Web 平台上渲染从而实现移动端与 Web 端复用代码。如果你正打算构建一个移动端 Web 端复用同一套 React Native 代码的应用这个 Demo App 是最佳的起步参考Expo 负责移动端React Native Web 负责浏览器端二者共享example/src下的全部视图代码。从源码结构看应用的组件演示页面全部集中在 example/src/views例如avatars.tsx、buttons.tsx、cards.tsx、inputs.tsx、overlay.tsx、tabs.tsx、tooltip.tsx等每个文件对应一个或一组组件组件库本体则位于packages/base无主题组件与packages/themed主题化组件两个子包中。二、在本地运行 Demo App2.1 安装 Expo CLI官方推荐使用 Expo CLI 来启动项目。全局安装命令如下[sudo] npm install -g expo-cli若在全局安装时遇到权限错误可附加--unsafe-permtrue标志重试这是 npm 在部分系统上的已知权限问题可参考 npm/npm#16766。需要说明的是当前仓库的示例应用基于较新的 Expo SDK 54 生态见 example/package.jsonexpo: ~54.0.10React Native0.81.4React19.1.0实际运行时可优先使用项目内依赖的 Expo CLI 版本例如通过npx expo start启动以规避全局 CLI 与 SDK 版本不匹配的问题。2.2 克隆项目git clone https://gitcode.com/gh_mirrors/re/react-native-elements.git2.3 安装依赖monorepo 结构该仓库是典型的 Yarn Workspaces monorepo根目录 package.json 中声明了packages/*、example、scripts/docgen等工作区。安装依赖时需在仓库根目录执行cd react-native-elements # Using yarn推荐仓库本身使用 yarn 4.5.2 yarn install # Using npm npm install cd example由于example直接引用同仓库的rneui/base、rneui/themed等本地包见 example/package.jsonrneui/layout: ^0.0.0-alpha.6在根目录统一安装可以保证本地包之间的符号链接正确。此外根目录还提供了快捷脚本example:startyarn workspace react-native-elements-app start可以在根目录直接启动示例应用见 package.json。2.4 启动跨平台应用进入example目录后用以下任意一种方式启动开发服务器# Using yarn yarn start # Using npm npm start启动后 Expo 开发服务器会给出二维码与快捷键可通过 Expo Go App 扫码在真机上预览或按a/i在 Android 模拟器 / iOS 模拟器上打开。example/package.json 还提供了针对单一平台的快捷脚本命令作用npm start/yarn start启动 Expo 开发服务器npm run android/yarn android启动并在 Android 上打开npm run ios/yarn ios启动并在 iOS 模拟器上打开npm run web/yarn web启动并以 Web 模式打开React Native Webnpm run lint/yarn lint运行 Expo 内置的 ESLint 检查三、Demo App 内部结构解析从入口到组件注册原文档聚焦如何跑起来本节结合仓库源码进一步揭示应用是如何组织起来的帮助你理解为什么这样配置。3.1 入口与根组件example/index.js 通过registerRootComponent(App)注册根组件这也是 Expo 的标准入口写法。example/App.tsx 是应用的真正根组件它串联了四个关键环节主题注入通过ThemeProvider与createTheme为全应用提供 RNE 主题并指定主色#3d5afe、Text组件的h1Style字号等见 example/App.tsx跟随系统深浅色通过useColorScheme()获取系统配色方案并设置theme.mode资源预加载调用cacheImages/cacheFonts提前缓存背景图、头像图与字体Georgia、Montserrat、Ubuntu 以及矢量图标字体全部加载完成后才设置isReady启动屏控制SplashScreen.preventAutoHideAsync()在启动时阻止闪屏自动隐藏待资源就绪后通过onLayoutRootView回调调用SplashScreen.hideAsync()再隐藏见 example/App.tsx。cacheImages与cacheFonts的实现位于 example/src/helpers/AssetsCaching.tsx图片通过Image.prefetch网络图或Asset.fromModule(image).downloadAsync()本地资源预取字体则通过expo-font的loadAsync加载矢量图标字体清单见 example/src/helpers/vector-fonts.ts覆盖 FontAwesome、Ionicons、Entypo、SimpleLineIcons、MaterialIcons、MaterialCommunityIcons 六套图标。值得注意的是Web 平台采用了不同的缓存实现 example/src/helpers/AssetsCaching.web.tsx图片缓存为空操作字体则动态注入font-face样式到document.head。这正是一套代码、平台差异化实现Platform-specific files的典型范例。3.2 导航与组件注册example/src/navigation/RootNavigator.tsx 使用react-navigation/drawer创建抽屉导航将 30 余个演示页面注册为抽屉项包括 Avatars、Badge、BottomSheet、Buttons、Cards、Checkbox、Chips、Dialogs、Divider、FAB、Image、Inputs、LinearProgress、Lists、Login、Overlay、Pricing、Ratings、Settings、Slider、Skeleton、Social Icons、Speed Dial、Tabs、Text、Theme、Tiles、Tooltip、Whatsapp Clone 等。example/src/navigation/DrawerNavigator.tsx 自定义了抽屉内容顶部展示项目 Logo中部内置一个Dark Mode 开关通过useTheme()的updateTheme在dark/light之间切换主题模式下方再渲染默认的DrawerItemList。这意味着你可以在真机 / 模拟器上实时观察 RNE 组件在明暗两种主题下的表现。主题切换的另一个演示入口是 example/src/views/theme.tsx页面提供 7 个色板2196f3、e91e63、3d5afe等点击后调用updateTheme动态修改lightColors/darkColors的primary色直观展示 RNE 主题系统的运行时热更新能力。四、部署 Web 版本一次构建静态托管原文档明确给出了 Web 部署的完整流程这也是 React Native Web 应用最有价值的使用场景之一。4.1 构建 Web 应用首先需要确认 Web 构建的publicPath配置正确——原文档要求在app.web-build.json中设置publicPath。需要提醒的是当前仓库的example目录并未内置该文件你需要在部署前自行创建并配置或在app.json的web字段example/app.json 中已有output: static、favicon等配置基础上扩展。随后执行 Web 构建yarn web说明在当前仓库的 example/package.json 中web脚本对应expo start --web开发模式。若需产出静态构建产物请使用 Expo 的导出命令例如npx expo export --platform web构建完成后会生成web-build目录。4.2 托管静态站点构建生成的web-build文件夹是一份纯静态资源可以直接托管到任意静态网站服务。原文档给出的方案是通过 gh-pages 发布到 GitHub Pagesyarn deploy注意当前仓库的example/package.json中并未内置deploy脚本执行前需要自行添加例如使用gh-pagesCLI 将web-build推送至gh-pages分支并且不要忘记在package.json中配置或修改homepage字段——GitHub Pages 等静态托管服务依赖该字段确定资源根路径否则可能出现静态资源 404。五、Ejecting从 Expo 弹出到原生工程Expo 管理Managed工作流隐藏了原生工程细节如果项目后期需要自定义原生模块或完全掌控原生代码可以执行弹出操作# Using Yarn yarn eject # Using npm npm run eject弹出过程不可逆会生成ios/android原生工程之后你将脱离 Expo 的管理式工作流需要自行维护 Xcode / Android Studio 构建配置。原文档强烈建议在操作前阅读官方 Expo 的 ejection 文档评估对现有代码与依赖的影响后再执行。六、Monorepo 工程细节为什么 Demo 能直接引用组件源码演示应用之所以能直接使用尚未发布的rneui/base、rneui/themed源码靠的是两套针对不同平台的模块解析配置Metro移动端example/metro.config.js 将watchFolders指向整个仓库根目录monorepo 监听nodeModulesPaths同时包含example/node_modules与根node_modules并通过自定义resolveRequest把以rneui/base/rneui/themed开头的导入重定向到packages/base/src、packages/themed/src而非dist并按.tsx/.ts/.native.tsx/.js顺序解析文件——这意味着修改组件源码后Demo App 会即时热更新无需先构建子包。WebpackWeb 端example/webpack.config.js 基于expo/webpack-config将react-native别名指向react-native-web并把每个packages/*包别名到其src目录同时用babel-loader处理packages与example目录下的 TS/TSX 文件。这两份配置共同保证了改一行组件源码三端iOS / Android / Web同时生效的开发体验是 RNE 迭代 UI 组件时的核心工作流。七、在你的应用中安装 React Native ElementsDemo App 只是展示层组件库本体通过react-native-elements发布。在自己的项目中安装# Using yarn yarn add react-native-elements # Using npm npm install react-native-elements --save在当前 monorepo 中组件库被拆分为rneui/base与rneui/themed两个子包分别对应无主题与主题化实现Demo App 中主要通过rneui/themed的ThemeProvider、createTheme、useTheme等 API 使用组件。八、反馈与后续如果在运行 Demo App 或复用其代码时遇到问题可以在仓库的 Issues 中创建新问题维护团队会跟进处理。若想进一步深入推荐继续阅读组件库主题系统的完整说明website/docs/customization/themeprovider.mdx 与 website/docs/customization/theme_object.mdx各组件 API 文档website/docs/components含每个组件的 props 明细组件源码与测试packages/base、packages/themed下各组件目录均配有__tests__测试用例例如 packages/base/Button/tests。总结从本地一键启动到三端复用、从静态 Web 部署到原生弹出example目录展示了一条完整的组件库演示应用工程化路径Expo 抹平移动端差异React Native Web 打通浏览器端Metro 与 Webpack 的 monorepo 解析让组件源码实时生效而rneui/themed的主题系统则为全部演示页面提供了统一的视觉语言。以这份 README 为起点配合仓库源码你完全可以把它改造成自己项目的跨平台应用脚手架。【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考