用纯 JavaScript 跑通 ReactXP：RXPHelloWorld 跨平台示例应用的构建与四端启动指南

跨平台前端【免费下载链接】reactxpLibrary for cross-platform app development.项目地址https://gitcode.com/gh_mirrors/re/reactxp点击查看免费下载RXPHelloWorld 是 ReactXP 仓库中一个以纯 JavaScriptJS编写的跨平台示例应用可以在 React NativeiOS、Android、Windows与 Web 四个目标上运行。本文以 samples/hello-world-js/README.md 为骨架结合该示例的真实源码与构建配置完整讲解依赖安装、Web 开发/生产构建、iOS/Android/Windows 三端启动的实操命令并剖析其入口链路、动画、导航与扩展组件实现帮助读者掌握一套 JS 代码多端运行的实战方法。项目概览一个四端同源的纯 JS 示例RXPHelloWorld 位于仓库的 samples/hello-world-js/ 目录README 明确说明This app works on React Native (iOS, Android, Windows) and web.该应用可运行于 React Native 的 iOS、Android、Windows 以及 Web。它直接使用reactxp^2.0.0核心库并依赖reactxp-imagesvg、reactxp-navigation、reactxp-video三个官方扩展见 samples/hello-world-js/package.json是一份验证同一套 JS 代码、多端一致运行的最短示例。从目录结构看它与仓库内 TypeScript 版的 samples/hello-world/ 相对应源码全部为.js文件分布在src/index.js——应用入口调用App.init()src/App.js——初始化 ReactXP 并挂载根视图src/config.js——开发模式标志src/views/——RootView.js导航容器、MainPanel.js首页、SecondPanel.js演示扩展组件的第二页src/controls/——ToggleSwitch.js、ProgressIndicator.js两个自绘控件web/——Webpack 构建配置与 HTML 模板jest/——测试配置与 Enzyme 环境ios/、android/、windows/——三个原生工程。第一步安装依赖README 给出的唯一构建步骤是From the hello-world-js directory, runnpm install. This fetches the dependencies.即在示例目录下执行cd samples/hello-world-js npm install该命令会拉取 samples/hello-world-js/package.json 中声明的依赖。值得说明的是README 声明后续命令默认你在本仓库根目录但start:*与build:*脚本定义在该示例自身的package.json中因此实际执行时请保持在samples/hello-world-js目录内运行npm run ...才能命中正确的脚本与相对路径。依赖构成可归纳为四类类别关键依赖作用核心reactxp^2.0.0跨平台 UI 抽象层扩展reactxp-imagesvg、reactxp-navigation、reactxp-videoSVG 绘图、导航栈、视频播放运行时react16.12.0、react-dom16.12.0、react-native0.70.2、react-native-windows1.0.0各端底层渲染工具链webpack5、babel-loader、react-native-community/cli、jest、enzyme、eslint构建、测试、静态检查运行 Web 端开发服务器与生产构建README 为 Web 提供了两条命令。开发模式npm run start:web该命令对应package.json中的脚本cross-env platformweb webpack-dev-server --configweb/webpack/dev.js --progress --colors --modedevelopment。从 samples/hello-world-js/web/webpack/dev.js 可以看到入口为web/index.hmr.js启用HotModuleReplacementPlugin代码改动即时热更新开发服务器端口固定为9999并配置open: true启动后自动打开浏览器使用inline-source-map便于调试。生产构建npm run build:web对应脚本为cross-env platformweb webpack --configweb/webpack/prod.js --progress --colors --modeproduction。生产配置samples/hello-world-js/web/webpack/prod.js会输出bundle-[hash].js到dist-web目录路径定义见 samples/hello-world-js/web/webpack/common.js通过CompressionPlugin生成 gzip 压缩包.gz供服务端直接下发关闭 devtool减小体积。Web 构建的两处关键机制__DEV__的注入webpack.DefinePlugin将__DEV__定义为argv.mode development见 samples/hello-world-js/web/webpack/common.js而 samples/hello-world-js/src/config.js 中的DEBUG、DEV直接取自__DEV__最终传给RX.App.initialize驱动开发/生产模式行为。按平台切换 Babel 预设samples/hello-world-js/babel.config.js 检测process.env.platform webWeb 构建追加babel/env预设React Native 端则使用metro-react-native-babel-preset。这正是npm run start:web用cross-env platformweb设置环境变量的原因。运行 iOS 端README 提供两种方式方式一命令行npm run start:ios脚本为npm run rn-cli run-ios而rn-cli指向node scripts/react-native.js该文件内容仅为require(react-native-community/cli).run()见 samples/hello-world-js/scripts/react-native.js即委托 React Native 社区 CLI 完成编译、打包并在模拟器上安装启动。方式二Xcodeopen ios/RXPHelloWorld.xcodeproj打开 samples/hello-world-js/ios/RXPHelloWorld.xcodeproj 工程后直接点击 Run 按钮即可。工程包含RXPHelloWorld、RXPHelloWorld-tvOS、RXPHelloWorldTests三个 target并附带RXPHelloWorld-tvOSTests测试 target见 samples/hello-world-js/ios/。运行 Android 端README 特别提醒前置条件需要有一个正在运行的 Android 模拟器最快捷的起步方式或连接一台真机。随后npm run start:android脚本为npm run rn-cli run-android同样经由 React Native CLI 完成 Gradle 构建与安装。备选方式是打开 samples/hello-world-js/android/ 目录下的 Gradle 工程含settings.gradle、build.gradle与gradlew包装器在 Android Studio 中直接点击 Run。运行 Windows 端npm run start:windows脚本为npm run rn-cli run-windows依赖rnpm-plugin-windows见 samples/hello-world-js/package.json与react-native-windows1.0.0。备选方式是打开 samples/hello-world-js/windows/RXPHelloWorld.sln在 Visual Studio 中按 Run 按钮构建并启动原生 Windows 应用。源码导读一次启动后发生了什么理解四端如何共享同一份 JS最快的方式是沿着入口链路读一遍源码。入口与初始化index.js仅一行import ./src/index;见 samples/hello-world-js/index.js。src/index.js导入App并调用App.init()。src/App.js 中init()的核心两步RX.App.initialize(DEBUG, DEV); RX.UserInterface.setMainView(this._renderRootView());RX.App.initialize完成 ReactXP 平台适配层初始化setMainView将根视图挂载到各端窗口。对 Web 而言挂载容器正是 samples/hello-world-js/web/template.html 中的.app-containerdiv。导航reactxp-navigation 的 Navigatorsrc/views/RootView.js 使用reactxp-navigation提供的Navigator组件管理页面栈componentDidMount中调用immediatelyResetRouteStack将MainPanel设为初始路由场景过渡类型为Fade首页按钮触发_onPressNavigate通过navigator.push压入SecondPanel过渡类型为FloatFromRight返回页通过navigator.pop()弹出。其中cardStyle使用RX.Styles.createViewStyle(style, false)并注释说明关闭样式缓存——这是因为标准导航样式要求是普通对象。renderScene根据routeId分发到对应面板组件。首页动画文本与链接src/views/MainPanel.js 展示了 ReactXP 的动画用法构造时用RX.Animated.createValue(-100)创建位移动画值并包装成createAnimatedTextStyle的translateY变换componentDidMount中RX.Animated.timing以 500ms、Easing.OutBack()缓动函数将文本从 -100 弹入 0页面还包含RX.Link跳转 ReactXP 文档与RX.Button触发导航。第二页三个扩展组件的实战演示src/views/SecondPanel.js 集中演示了仓库中三个扩展的能力ToggleSwitch自绘开关src/controls/ToggleSwitch.js 用RX.Animated.parallel同时动画旋钮左偏移与背景颜色颜色通过RX.Animated.interpolate(value, [0, 1], [#66f, #ddd])平滑过渡动画时长 250ms、缓动为Easing.InOut()点击时e.stopPropagation()阻止冒泡。ProgressIndicator环形进度条src/controls/ProgressIndicator.js 基于reactxp-imagesvg的ImageSvg与SvgPath按进度值实时计算圆弧路径的终点坐标M r, r L r, 0 A ... z在SecondPanel中由setInterval每 1000/15 ms 递增进度驱动动画。Video视频播放直接使用reactxp-video的RXVideo加载公开测试视频源onCanPlay回调中静音并自动播放mute(true)play()。工程化配套测试与代码规范除运行脚本外该示例还具备完整的工程化配套可作为 JS 版 ReactXP 项目的脚手架参考单元测试samples/hello-world-js/jest/jest.config.js 以src为测试根目录识别*.test.*/*.spec.*文件并通过 samples/hello-world-js/jest/enzyme.config.js 配置 Enzyme React 16 适配器与快照序列化器npm test即可运行。静态检查samples/hello-world-js/.eslintrc 启用eslint:recommended、plugin:react/recommended、plugin:jest/recommended并将__DEV__声明为全局变量npm run lint执行检查同时在 Web 构建阶段通过eslint-loader前置拦截。Metro 配置samples/hello-world-js/metro.config.js 为 React Native 端提供转换选项experimentalImportSupport、inlineRequires保证 Metro 打包器与示例代码兼容。小结一条命令一个端把 README 中的命令汇总为速查表即可快速在四端间切换目标平台命令 / 操作安装依赖cd samples/hello-world-js npm installWeb开发npm run start:web端口 9999热更新Web生产npm run build:web输出dist-web gzipiOSnpm run start:ios或 Xcode 打开ios/RXPHelloWorld.xcodeprojAndroid先启动模拟器/连接真机再npm run start:android或用 Android Studio 打开android/Windowsnpm run start:windows或 Visual Studio 打开windows/RXPHelloWorld.sln从这份纯 JS 示例可以清晰看到 ReactXP 的设计目标业务代码只需面向RX.*统一 API 编写平台差异交给 ReactXP 核心与各端适配层消化导航、SVG、视频等能力则以官方扩展形式按需引入。若希望进一步体验 TypeScript 版本与更完整的控件集可对照同仓库的 samples/hello-world/TS 版与 samples/RXPTest/测试用例合集继续深入。赞分享跨平台前端【免费下载链接】reactxpLibrary for cross-platform app development.项目地址https://gitcode.com/gh_mirrors/re/reactxp点击查看免费下载相关推荐使用 Flet 在纯 Python 中构建跨平台应用从 Counter 示例到运行原理使用 Flet 在纯 Python 中构建跨平台应用从 Counter 示例到运行原理 导读 Flet 是 GitHub 加速计划 fl/flet 仓库中核心前端跨平台桌面应用移动开发四文件跑通端侧 LLMRunAnywhere Electron SDK 最小示例应用深度解析四文件跑通端侧 LLMRunAnywhere Electron SDK 最小示例应用深度解析 runanywhere minimal 是 RunAnywherAI模型推理服务推理引擎本地部署多模态Redux 原生版计数器示例零构建、零框架只用 HTML 与纯 JavaScript 跑通 Redux 核心 APIRedux 原生版计数器示例零构建、零框架只用 HTML 与纯 JavaScript 跑通 Redux 核心 API 导读 本篇文章基于仓库中的 examp前端上一篇免费解锁Wand专业版功能开源增强工具完全指南下一篇Wand-EnhancerWand应用本地增强与远程控制完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考