React Native Web 与 React Native Elements 跨端实战从零构建 GitHub 仓库查看器 gitphone【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements本文以 React Native Elements 官方博客《React Native Web》为基础完整还原一个一套代码同时运行在 iOS、Android 与 Web 三端的真实案例用create-react-native-web-appCRNWA初始化项目接入 React Native ElementsRNE组件库配合react-router完成跨端路由并通过 GitHub API 打造一个可查询任意仓库提交记录的gitphone应用。读完本文你将掌握 RNE 与 React Native Web 的组合套路、webpack 转译与图标字体配置、跨平台路由的拆分方法以及 HOC 组合、表单提交、API 数据渲染与边界处理的完整链路。背景为什么是 React Native Web React Native ElementsReact Native 的核心价值是一次编写、多端运行而 React Native WebRNW把这个承诺延伸到了浏览器同一份组件代码既可以产出原生 App也可以编译为标准的 Web 应用。React Native ElementsRNE则是在这套跨端抽象之上提供的一整套 UI 组件库组件内部全部基于 React Native 的跨平台 API 实现因此天然同时适用于 Native 与 Web。从当前仓库的源码可以印证这一点RNE 的组件几乎都直接建立在 React Native 的跨平台基元之上。例如 Button.tsx 内部使用的是Pressable并根据Platform.OS区分 Android 的水波纹android_ripple与其他平台的阴影效果Input.tsx 则是 React NativeTextInput的封装。这种底层永远只依赖 React Native API的设计正是 RNE 能在 RNW 场景下无缝工作的根本原因。本案例要构建的gitphone是一个 GitHub 仓库查看器第一屏输入owner与repo第二屏展示该仓库的提交记录作者头像、姓名、提交信息。它覆盖了跨端应用最常见的三大需求表单交互、页面路由、远程数据请求。说明本文原文发布时 RNE 尚处于1.0.0-beta7阶段当前仓库中的 RNE 已演进为rneui/base与rneui/themed两个包版本5.0.0见 packages/base/package.json组件 API 在演进中有扩展与调整但本文演示的核心用法Input / Button / Header / ListItem / Avatar / Text在最新版中依然成立文末会给出对应的源码佐证。第一步初始化项目并验证三端可运行安装脚手架create-react-native-web-appCRNWA是一个基于 react-native react-native-web webpack 的脚手架一条命令即可生成同时支持 Android、iOS、Web 的项目骨架。全局安装它$ npm i -g create-react-native-web-app创建 gitphone 项目$ create-react-native-web-app gitphone脚手架会依次完成创建项目文件夹、写入项目文件、安装依赖内部使用 yarn。安装完成后进入项目目录即可使用以下命令命令作用yarn web启动 Web 开发服务器默认端口 3001编译成功后在浏览器中访问http://localhost:3001/yarn android在已连接的 Android 设备/模拟器上构建并安装 APK需先安装 adbyarn ios在 iOS 模拟器上运行仅限 macOS需安装 Xcodeyarn test运行 Native 与 Web 的测试yarn build构建 Web 生产版本依次验证三端Web运行yarn web看到Compiled successfully!后浏览器访问http://localhost:3001/即可看到脚手架默认页面。Android运行yarn android构建成功后日志会显示Installed on 1 device并自动启动应用Installing APK app-debug.apk on Redmi 4X - 7.1.2 for app:debug Installed on 1 device. BUILD SUCCESSFUL Total time: 21.783 secs Starting: Intent { cmpcom.creaternwapp/.MainActivity } ✨ Done in 25.64s.iOS运行yarn ios应用应能在模拟器中正常启动。如果在yarn android或yarn ios阶段构建失败先不要继续直接跳到文末的排错指南处理那里给出了 AndroidAIDL 缺失与 iOSXcode 10 编译问题两类典型故障的解决方案。第二步接入 React Native Elements 与矢量图标安装依赖在项目根目录安装 RNE当时为 beta 版本与 React Native Vector IconsRNVI$ yarn add react-native-elementsbeta $ yarn add react-native-vector-iconsRNVI 是 RNE 图标能力的底层依赖原生端需要手动链接$ react-native link react-native-vector-icons解决 webpack 转译报错把 RNE / RNVI 加入 Babel 转译范围RNE 与 RNVI 的源码都使用 ES6 编写。对原生端来说这没有问题但 CRNWA 默认的 webpack 配置通常只转译src目录不会转译node_modules中的代码。此时运行yarn web会直接报错./node_modules/react-native-elements/src/config/withTheme.js Module parse failed: Unexpected token (12:28) You may need an appropriate loader to handle this file type.解决办法是修改 webpack 配置在 Babel loader 的include数组中加入这两个包打开config/webpack.config.dev.js找到注释为Process JS with babel处理 JS 的 babel 配置的位置将react-native-elements与react-native-vector-icons加入include对config/webpack.config.prod.js做同样的修改。这一改动只影响 webpack 的模块编译范围不会改变任何业务代码逻辑。从原理上说webpack 需要先用 Babel 把 ES6 语法降级为浏览器可执行的 ES5 语法凡是源码以 ES6 发布的 npm 包在 web 构建时都必须加入这个白名单。现代参考当前仓库中 RNE 的 web 示例使用了 example/webpack.config.js 配合 website/plugins/react-native-elements-web.js 插件来完成类似的转译与别名处理可作为升级到新版 RNE 时的配置参考。验证用 RNE 的 Button 替换 TouchableHighlight为了确认集成成功先做一个最小改动打开src/App.js导入 RNE 的Buttonimport { Button } from react-native-elements;然后把渲染中的TouchableHighlight替换为 RNE 的Button。随后分别运行yarn ios、yarn android、yarn web三端都应该正常显示按钮。源码佐证当前版本中 Button.tsx 的Button组件除了title与onPress之外还支持icon可同时与iconRight使用、iconPositionleft/right/top/bottom、typesolid/clear/outline、loading显示加载动画并自动屏蔽点击见handleOnPress中对loading !disabled的判断、raised、disabled、size、radius、color等 props——这也解释了后文Button with Icon为何能一行完成图文按钮。提示Android 端若报Could not find com.android.tools.build.appt2需要在 Gradle 的仓库配置中加入google仓库。第三步构建 Home 表单屏Input Button组件骨架在src下新建Components文件夹添加Home.js包含两个输入框owner、repo和一个提交按钮。在App.js中导入Home并替换原有渲染内容三端运行验证。为 Home 添加样式直接堆组件看起来并不美观因此新建Components/Shared.style.js集中管理样式对象在Home中导入并应用到容器、输入区与按钮上。把样式抽到独立文件的做法方便后续多个组件复用后面的CommitList也会用到。修复 RNVI 在 Web 端的图标字体问题给输入框或按钮加上图标后Web 端可能会出现图标不显示的问题。原因在于RNVI 在 Web 端依赖字体文件如FontAwesome.ttf而 webpack 默认不会处理这些.ttf资源。修复分两步在config/webpack.config.dev.js以及config/webpack.config.prod.js中为.ttf增加url-loader规则把字体文件作为静态资源交给 webpack 处理打开src/index.js在文档head中注入font-face样式并引用对应的字体文件路径让浏览器能够加载图标字体。完成这两步后Web 端就能正确渲染 RNVI 图标了。现代参考当前仓库的 Expo 示例通过 example/src/helpers/vector-fonts.web.ts 显式声明 FontAwesome、Ionicons、MaterialIcons 等字体的require路径再由 AssetsCaching.web.tsx 之类的机制注入本质思路与上面一致——Web 端必须确保字体资源被正确打包与加载。第四步跨端路由react-routergitphone有两个页面Home输入表单与CommitList提交列表。用户点击 Submit 后跳转到第二屏。这里选择 react-router 系列因为它在 Native 与 Web 上都能工作Web 使用BrowserRouter基于 history APINative 使用NativeRouter基于内存栈。$ yarn add react-router-dom react-router-native由于两者不能混用需要按平台拆分模块。在src下创建Utils文件夹添加两个文件内容几乎一致仅第二行不同Routing.web.js导出BrowserRouter、Route、Switch、withRouter等来自react-router-domRouting.native.js导出同名 API来自react-router-native。React Native / Web 的打包器会根据扩展名自动选择对应文件.web.js用于 web.native.js用于原生。在 App 中挂接路由在App.js中导入CommitList组件从Utils/Routing导入Route、Router、Switch在render方法中实现路由Switch Route exact path/ component{Home} / Route path/commit component{CommitList} / /Switch用 withRouter 触发跳转在Home.js中导入withRouter并用 HOC 包裹Home组件import { withRouter } from ../Utils/Routing; // ... export default withRouter(Home);为按钮添加onPressButton titleSubmit onPress{this.onPressButton} /实现事件处理通过history跳转onPressButton () this.props.history.push(/commit);withRouter是 react-router 提供的高阶组件它会向被包裹组件注入history、location、match等路由属性让非路由组件也能发起导航。此时在 Web 与 Android 上测试应当可以在两个屏幕间来回切换Submit 进入系统返回键退出。第五步用 withHeader HOC 复用顶部导航RNE Header为了让CommitList拥有返回/回首页的能力并且后续新增屏幕时可以复用这里封装一个withHeaderHOC在src下创建HOCs文件夹添加withHeader.js导入 RNE 的Header与 RNVI 的 FontAwesome 图标import { Header } from react-native-elements; import Icon from react-native-vector-icons/FontAwesome;withHeader接收一个title参数返回一个包装组件的高阶函数const withHeader ({ title }) (WrappedComponent) { // ... };在包装组件内部实现导航事件goBack () this.props.history.goBack(); goHome () this.props.history.replace(/);用Header渲染左侧返回按钮、中间标题、右侧首页按钮例如Header leftComponent{Icon namechevron-left color#fff onPress{this.goBack} /} centerComponent{{ text: title, style: { color: #fff } }} rightComponent{Icon namehome color#fff onPress{this.goHome} /} /在CommitList中导入并使用withHeader({ title: Commits })(CommitList)。源码佐证当前版本的 Header.tsx 完整支持leftComponent/centerComponent/rightComponent三栏布局placementleft/center/right控制标题对齐backgroundColor、backgroundImage、linearGradientProps控制视觉样式并且内部使用react-native-safe-area-context的SafeAreaView处理刘海屏/状态栏避让默认edges [left, top, right]——这些能力让withHeader这类封装在现代版本中更加稳健。第六步从 GitHub API 拉取提交数据GitHub 提供了列出仓库提交记录的公开接口GET /repos/:owner/:repo/commits为了演示 RNE × RNW 这一主题这里先不引入复杂的状态管理直接用一个轻量 HOC 库fetch-hoc来处理请求生命周期loading / data / error并用redux提供的compose把多个 HOC 组合到同一个组件上$ yarn add fetch-hoc redux在CommitList.js中导入compose与fetchimport { compose } from redux; import { fetch } from fetch-hoc;组合 HOCexport default compose( withHeader({ title: Commits }), fetch(() https://api.github.com/repos/facebook/react-native/commits) )(CommitList);此时运行yarn web打开 DevTools 的 Network 面板并点击 Submit可以看到返回了一大批 commit 数据GitHub API 默认返回 30 条。第七步用 ListItem Avatar 渲染提交列表需要展示的字段每条提交记录我们关注三个字段author.avatar_url // 提交者头像 commit: author.name // 提交者姓名 message // 提交信息修改 CommitList 的渲染逻辑新增导入import { ActivityIndicator, Dimensions, FlatList, Platform, View } from react-native; import { Avatar, ListItem } from react-native-elements;主渲染改为按状态分发内容View style{styles.container} {this.renderContent()} /View创建renderContent加载中显示ActivityIndicator否则渲染FlatListrenderContent () ( this.props.loading ? ActivityIndicator color#87ceeb / : FlatList keyExtractor{this.keyExtractor} data{this.props.data} renderItem{this.renderItem} / )创建renderItem用 RNE 的ListItem展示姓名与提交信息renderItem ({ item }) ( ListItem title{item.commit.author.name} subtitle{item.commit.message} leftElement{this.renderLeftElement(item)} / )创建renderLeftElement用 RNE 的Avatar展示作者头像renderLeftElement (item) ( View Avatar source{{ uri: item.author.avatar_url }} sizemedium rounded / /View )源码佐证以上用法在最新版中全部成立ListItem.tsx 的ListItemBase在传入onPress/onLongPress时自动使用Pressable作为容器Component onPress || onLongPress ? Pressable : View并支持bottomDivider、topDivider、pad等 props其子组件ListItem.Title、ListItem.Subtitle、ListItem.Content、ListItem.Chevron等位于 packages/base/src/ListItemleftElement/rightElement用于插入自定义头部/尾部元素Avatar.tsx 定义了size预设值small: 34, medium: 50, large: 75, xlarge: 150rounded使其呈圆形title则用于在无图片时渲染文字占位下一节的边界处理会用到。此时运行应用提交列表就呈现在眼前了每行一条 commit左侧是作者头像右侧是姓名与提交信息。第八步表单提交与跨屏传值formik history state用 formik 接管表单手写受控表单既繁琐又易错这里引入 formik 管理表单状态$ yarn add formik在Home.js中导入import { Formik } from formik;用Formik包裹主View声明初始值与提交回调Formik initialValues{{ owner: , repo: }} onSubmit{this.onPressButton} {({ handleChange, handleSubmit, values }) ( View style{styles.container}把两个 RNEInput与表单状态绑定Input ... onChangeText{handleChange(owner)} value{values.owner} / Input ... onChangeText{handleChange(repo)} value{values.repo} /按钮的onPress改为handleSubmitButton ... onPress{handleSubmit} /别忘了闭合View与Formik/View )} /Formik源码佐证RNE 的 Input.tsx 本身就是对 React NativeTextInput的封装因此TextInput的全部受控属性value、onChangeText等都可以直接透传此外它还额外支持label、errorMessage、leftIcon/rightIcon、disabled、shake()动画基于AnimatedEasing.bounce参考 Material Design 动效时长 375ms等能力。特别地Input 在渲染时调用了patchWebProps见 helpers/index.tsx用于剥离updateTheme、replaceTheme、onClear等 Web 端不适用的 props这正是 RNE 组件对 Web 端做兼容处理的微观体现。通过 history state 跨屏传值表单提交后需要把owner与repo传给第二屏。做法是在跳转时把值放进路由 statethis.props.history.push({ pathname: /commit, state: { owner, repo } });然后在CommitList中读取导入withRouter并把它加入compose让fetch从路由 state 中取参数构造请求 URLcompose( withHeader({ title: Commits }), withRouter, fetch(({ location: { state {} } }) ( https://api.github.com/repos/${state.owner}/${state.repo}/commits )) )(CommitList)注意HOC 的组合顺序很重要。fetch-hoc需要从withRouter注入的location中读取 state因此withRouter必须位于fetch之前即组合时先执行更内层的 HOC。保持与上面一致的顺序否则拿不到参数。此时完整测试在表单输入任意仓库例如facebook/react-native点击 Submit第二屏应当拉取到该仓库的提交记录。第九步打磨边界情况仓库不存在时的错误提示如果用户输入了一个不存在的仓库会怎样原生端会红屏Web 端会白屏。fetch-hoc在请求失败时会返回error状态利用它来做兜底修改renderContent在非加载状态下先判断错误this.props.loading ? ActivityIndicator color#87ceeb / : this.renderFlatList()从 RNE 导入Textimport { ..., Text } from react-native-elements;新增renderFlatList有错误时展示错误信息this.props.error ? Text h4Error: {this.props.data.message || }/Text : FlatList ... /再次测试此时屏幕会显示Error: Not Found而不是红屏/白屏。源码佐证Text组件Text.tsx支持h1/h2/h3/h4布尔 props配合h4Style等样式 props 即可快速产出标题级文本这正是上面Text h4的用法来源。作者信息缺失时的占位处理接着尝试拉取facebook/react-native的提交又会遇到一个新错误Cannot read property avatar_url of null并非所有提交者的author字段都带有avatar_url甚至可能为 null。首先给 Avatar 的source做空值兜底source{{ uri: (item.author item.author.avatar_url) || undefined }}但直接渲染空头像并不美观更好的方案是用正则提取提交者姓名的首字母通过 Avatar 的titleprops 渲染文字占位renderLeftElement (item) { const initials item.commit.author.name.match(/\b\w/g) || []; return ( View style{leftElementStyle} Avatar title{((initials.shift() || ) (initials.pop() || ))} .../\b\w/g匹配每个单词的首字符shift()取第一个、pop()取最后一个拼接后即为姓名缩写例如 Havit Rovik → HR。当有真实头像时仍然优先显示头像——Avatar 的title本身就是占位内容配合source时会在图片加载前显示。至此gitphone已经是一个健壮可用的跨端应用有表单、有路由、有网络请求、有加载态、有错误态、有数据空值兜底。结论与可扩展方向回顾整个案例我们完成了一个同时运行在 iOS、Android 与 Web 三端的 RNE RNW 应用✅ 三端运行正常✅ 使用 react-native-elements 组件✅ 跨屏路由✅ GitHub API 请求与渲染。在此基础上gitphone还有几个自然的改进方向表单状态保留从Commits屏返回Home时输入框内容会清空。引入 redux 将表单值提升到全局状态即可在返回时保留用户输入无限滚动GitHub API 默认只返回 30 条。Web 端可以用react-visibility-sensor在滚动接近底部时触发加载下一页原生端则更简单直接使用FlatList的onEndReached回调即可追加数据。排错指南#1yarn android构建失败aidl is missing典型报错:app:compileDebugAidl FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task :app:compileDebugAidl. java.lang.IllegalStateException: aidl is missing BUILD FAILED修复步骤打开 Android Studio打开gitphone项目下的android目录按提示点击 Update更新 SDK 组件等待 Gradle 同步完成同步完成后若提示版本问题点击Update Build Tools version and sync project若仍有Configuration compile警告打开app/build.gradle把dependencies中的compile改为implementationdependencies { implementation fileTree(dir: libs, include: [*.jar]) implementation com.android.support:appcompat-v7:23.0.1 implementation com.facebook.react:react-native: }再次同步并关闭 Android Studio此时yarn android应能成功。#2yarn ios构建失败Xcode 10 时代的 double-conversion / libRCTWebSocket 问题典型报错以 double-conversion 的strtod.cc编译失败为例** BUILD FAILED ** The following build commands failed: CompileC .../double-conversion-1.1.5/src/strtod.cc ...这类问题通常是旧版 React Native 与新版 Xcode 的兼容性问题需要给node_modules/react-native/third-party中的依赖打补丁。若随后又遇到libRCTWebSocket.a链接失败The following build commands failed: Libtool .../Debug-iphonesimulator/libRCTWebSocket.a normal x86_64 (1 failure)可以尝试将已经编译好的libfishhook.a复制到 RN 的 WebSocket 目录使链接阶段能解析该符号。说明以上 iOS 故障发生在 2018 年的旧版 React Native 上属于当时特定工具链版本的历史问题如今 Xcode 与 React Native 均已大幅演进遇到此类问题应优先检查本地 Xcode 版本与 React Native 版本是否匹配。这里保留原始排错思路供排查旧项目时参考。附录仓库内可继续深挖的源码入口packages/base/src/Button/Button.tsxButton 完整 props 与实现icon / loading / type / raised / size / radius / colorpackages/base/src/Input/Input.tsxInput 封装与shake动画、patchWebProps调用packages/base/src/Header/Header.tsx三栏 Header 与 SafeArea 处理packages/base/src/ListItem/ListItem.tsxListItem 容器与子组件体系packages/base/src/Avatar/Avatar.tsxAvatar 的 size 预设、rounded、title 占位packages/base/src/Text/Text.tsxText 的 h1–h4 标题能力packages/base/src/helpers/index.tsxrenderNode、patchWebProps等跨端兼容工具example/src/helpers/vector-fonts.web.tsWeb 端图标字体声明的现代参考实现example/webpack.config.jsWeb 构建配置参考packages/base/src/index.ts组件统一导出入口。【免费下载链接】react-native-elementsCross-Platform React Native UI Toolkit项目地址: https://gitcode.com/gh_mirrors/re/react-native-elements创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考