登录社区云,与社区用户共同成长
邀请您加入社区
帮助 Diff 算法识别哪些元素变化了,避免就地复用导致的 bug(如输入框状态错乱)。状态管理方案多,选择成本高(Redux/MobX/Zustand/Recoil)跨平台能力强(React Web + React Native)(可中断):构建 workInProgress 树,计算变更。事件池机制(React 16 及之前,17 已移除):主 bundle + 业务 bundle,按需加载。
(前身是 PhoneGap)是最老牌的混合应用(Hybrid App)框架,比 React Native(2015)、Flutter(2017)都要早。它的核心思想非常简单:用系统自带的 WebView 加载本地 HTML/CSS/JavaScript,再通过一层"桥接"(Bridge)让 JS 能调用设备原生能力。层内容说明Web 层www/目录下的 HTML/CSS/JS应用业务代码,一次编写
我写了6年的代码,经历过从html + javaScript + css,到jQuery,再到vue和React的前后端分离,经历过移动端热潮,经历过小程序的发展。每次新东西出来,都有人说"前端要失业了"。之前React Native出来的时候说是"前端的终结"。结果呢?前端现在一样是好好的,只是变得不一样了。记住:AI带来的不是“抢饭碗”,而是又一次的筛选。筛选掉那些靠"会写代码"吃饭的人,留下
本文介绍基于React Native 0.75与WebRTC的云对讲模块设计,集成海康萤石SDK与思悦WebRTC双平台,实现可视对讲、远程开门等核心功能。通过阿里云Push+WebSocket双通道保障杀进程收通知,利用双重锁防重复跳转,2秒轮询检测通话状态,确保实时性与状态一致性。关键技术包括WebRTC P2P音视频传输、信令交换、原生模块桥接及跨平台路由兼容,适用于新老小区混合部署场景。
本文介绍基于React Native 0.75与MQTT的智能家居模块设计,采用Redux管理状态、HOC复用控制逻辑,实现设备实时控制与状态同步。通过MQTT的Pub/Sub模型,支持设备一键联动、定时任务及多端同步,结合乐观更新确保UI零延迟响应。技术选型上,静态数据走HTTP,实时通信依赖MQTT,充分发挥其低带宽、高可靠、一对多推送优势,构建高效稳定的物联网应用架构。
在工程中创建新 Module,File > New > Module > Empty Ability。执行 Run > Run 'application',将新创建的 Module 的 HAP 包安装到系统中。在以上三个文件添加自己应用的配置信息(需要服务 bundleName 和 finger)。命令打印出 HAP 的 finger 信息,然后删除新创建的 Module,恢复工程。此应用需要拉起
将文件拷贝到根目录。16、新烧录镜像必须给设备授权,否则无法组网。// 查看usb相关的驱动服务。打开日志(在抓log前执行)-----#打开DEBUG级别日志。本地的:文件所在路径下cmd–>
本周主线是移动端与编译链同时换轨:Shopify 弃 React Native 转原生后,oxc 的 Rust 版编译器把千文件 React 应用构建压到 0.81 秒;Three.js 巴黎首会开启 WebGPU 视觉篇;Vitest 5.0 提速 53% 并带来 Trace View,Rslib 1.0 与 deck.gl 9.4 相继发布,浏览器则有 W3C 日本三十周年回顾。
2020 年 1 月,Shopify 工程博客发了一篇文章,标题叫《React Native is the future of mobile at Shopify》,宣布所有新移动 App 全面押注 React Native。六年半之后,2026 年 9 月 10 日,同一个博客发了另一篇文章,标题叫《Native is now the future of mobile at Shopify》。未
如果你是做React Native 前端开发。
如果你是在准备RN 面试/技术方案React 18 对 React Native 最大的影响,是把 Concurrent Rendering、Automatic Batching、Transitions 等新的 React 渲染能力带入 RN 的技术演进,同时推动 RN 与 Fabric 新架构结合。实际开发中最明显的变化是状态更新的批处理、StrictMode 下副作用行为,以及未来更好的渲染调
随着鸿蒙生态的快速发展,越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期,大量常用三方库只有 Android / iOS 实现,鸿蒙侧只能自己造轮子。为了解决这个问题,对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配,统一托管在 GitCode 的下,全部通过 TAG 版本隔离、配套门禁编译验证,开箱即用。本篇是系列文章之一,主角是—
将一个已经形成交互闭环的 Web 教学应用迁移到 OpenHarmony,未必意味着立即用 ArkUI 重写全部界面。本项目选择 OpenHarmony Stage 模型 + ArkTS 外壳 + ArkWeb 本地资源的路线,把现有 RISC-V 指令积木、解析器、模拟器和机器状态展示放入 HAP 中运行。本文结合工程结构,说明路线选择、rawfile 同步、JSBridge 预留、真机适配和双
一、技术选型:原生 vs 跨平台表格维度原生(Kotlin/Swift)FlutterReact Native性能最高接近原生中等(有桥接损耗)双端代码复用0%(两套代码)90%+80%+包体积最小较大(自带引擎)中等热更新不支持部分支持CodePush 支持硬件能力调用完整需写 Platform Channel需写 Native Module适合场景重度性能/音视频大多数定制项目团队有前端背景经
文件格式: 后缀名为.json的纯JSON格式文件,包含大括号包裹的多个字段定义核心作用: 管理React Native工程的所有配置和依赖关系name: 应用名称,如示例中的"demo"version: 应用版本号,格式为"主版本.次版本.修订号",如"0.0.1"private: 布尔值,设为true可防止工程被意外发布到npm仓库注意: 当设置为true时,执行npm publish会报错s
如果你是在整理React Native 调试体系Flipper 是过去 RN 很重要的综合调试工具;Remote Debugging 是过去常见的 JS 调试方式;对于现在的新 RN 项目,优先使用 React Native DevTools + Android Studio/Xcode。如果你告诉我你目前用的是React Native 哪个版本(比如 0.73、0.76、0.79、0.81),我
可以。RN(React Native)最容易踩坑的其实不是“安装不上”,而是。如果你现在准备搭一个 RN 项目,我建议直接按“”的方式来,不要先把 Node、Java、Android Studio 全部升级到最新版。
本文分析的是一个基于React Native构建的饮食管理应用,集成了数量选择、营养计算、目标设定等核心功能。该应用采用了组件化的数量控制器、响应式营养计算和个性化的目标设定机制,展现了健康管理类应用的典型技术架构。在鸿蒙OS的跨端适配场景中,这种涉及复杂数据计算和个性化配置的应用具有重要的技术参考价值。
如果你的项目是准备真正上生产的 RN OTA,我不建议直接自己写一套「下载 JS → 替换 Bundle」就上线。需要特别考虑App Store / Google Play 对代码更新政策、JS Bundle 签名、防篡改、回滚、灰度、Native/JS 兼容性。另外,不同 RN 版本对 Hermes、Codegen、New Architecture、Metro Bundle 的处理也不同。如果你
本项目深入探讨了 Flutter 中的文本样式定制和国际化实现两大技术主题,展示了从基础用法到高级特性的完整技术栈。在文本样式方面,项目展示了加粗、斜体、颜色、阴影等多种常用文本效果,并通过封装样式化组件体现了组件复用的设计思想。TextStyle 是 Flutter 中控制文本外观的核心类,掌握其各种属性对于创建丰富的文本展示效果至关重要。在国际化方面,项目实现了一套轻量但完整的本地化方案,包括
直观的模式对比:通过点击切换的方式,让用户可以直观地对比六种BoxFit模式的差异,比文字描述更加生动有效,是学习 Flutter 图片适配的绝佳工具。双手势交互:巧妙地利用单击和双击两种手势来触发不同的操作,交互方式简洁高效,符合用户的直觉操作习惯。完善的文档内置:在组件内部集成了模式说明文档,使应用具有良好的自解释性,降低了用户的学习成本。响应式主题:内置明暗主题切换,所有颜色都根据主题状态动
本项目实现了一个功能完整、设计合理的数据表格组件,代码结构清晰,易于理解和扩展,是 Flutter 自定义复杂组件的优秀学习案例。技术亮点体现在以下几个方面:第一是纯原生实现。不依赖任何第三方表格库,完全使用 Flutter 基础组件构建,代码量适中,逻辑清晰。开发者可以完全掌控每一个细节,也便于根据具体业务需求进行定制化修改。第二是灵活的列配置。每一列都可以独立设置宽度和对齐方式,满足不同类型数
React Native 里“内存泄漏”很大一部分其实来自。。
① 状态放置位置↓② 合理组件边界↓③ 避免 Context 过大↓④ FlatList / SectionList 优化↓↓↓⑦ useMemo↓⑧ 最后才考虑更底层的性能优化是“减少不必要 render”的工具,不是解决组件结构问题的工具。如果你的页面现在已经比较复杂,我也可以直接按一个真实的 React Native 页面,给你演示“错误组件拆分 → 优化后的组件树 → memo/useCa
你怎么优化 React Native 的 FlatList?可以回答:FlatList 底层基于 VirtualizedList,通过虚拟化机制只渲染可视区域及附近窗口内的 Cell,而不是一次性渲染整个数据集。控制 Cell 渲染:使用React.memo,避免无关 Item 重渲染。稳定引用renderItem、callback 使用,避免不必要的函数重新创建。固定高度优化:如果 Item 高
React Native 怎么做性能优化?可以回答:我一般从 JS、渲染、列表、图片、动画、Native 通信和启动性能几个方面排查。首先通过 Profiler 确认瓶颈,而不是盲目使用 memo。渲染层主要减少不必要的 re-render,合理使用 React.memo、useMemo 和 useCallback;列表使用 FlatList,并根据场景优化 windowSize、initialN
React Native 做,推荐不要自己封装 Native 权限,而是统一使用:它统一封装 iOS / Android 权限申请、检查、跳转设置等流程。
React Native(RN)调用原生 Android/iOS 方法,以及原生回调 RN,核心机制是。
JSI = React Native 中连接 JS Runtime 和 C++ Native 世界的一层 C++ 接口。它通过让 JS 持有 C++ 对象引用,实现同步调用、零 JSON 序列化、高性能 Native 交互,是 TurboModules 和 Fabric 的底层基础。如果继续深入,可以研究JSI 源码结构(jsi.h)、Hermes Runtime、HostObject 生命周期、
TurboModule 是 **React Native 新架构(New Architecture)**中的一种新型原生模块系统,用来替代旧的 。它解决了旧 Bridge 架构中 JS 和 Native 通信效率低、类型不安全、启动慢等问题。(GitHub)简单理解:传统 React Native:调用过程:JS 调用 Native 方法参数序列化成 JSON通过 Bridge 传递Native
此文简单讲解了官方 React 快速上手脚手架的安装与介绍。1. React 快速上手脚手架 create-react-app为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。当然,如果你需要 React Native 的脚手架项目,可以查看这里:create-react-...
原文发表于我的技术博客本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置。原文发表于我的技术博客React Native 以及示例 App 简介关于 React Native 的简要介绍。{% blockquote http://facebook.github.io/react-native...
此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。书籍还配套了视频教程「80 节...
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法。1. 软件开发语言与框架的学习本质我们在开始系列文章的技术点内容前,花一点时间探讨一下软件开发语言以及框架的学习本质,相对于整个技术点的讲解,花这一点一起思考的时间是值得的。相信看此系列文章的朋友都已有了非常多的软件开发经验...
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与机制。目前 React 可以说是前端世界最火热的框架,具有高性能以及容易上手的特性,而且在掌握了 React 框架后,再学习其他类似 React 的框架也将变得更易上手。关于 Reac...
此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。书籍配套视频教程「80 节实战课...
此文简单讲解了官方 React 快速上手脚手架的安装与介绍。1. React 快速上手脚手架 create-react-app为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。当然,如果你需要 React Native 的脚手架项目,可以查看这里:create-react-native...
此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。书籍还配套了视频教程「80 节实战课精通..
比如封装一个按钮:import {Textreturn (<Text>登录</Text>
App启动初始化 ReactContext加载 ReactPackage生成 NativeModuleRegistryBridge/TurboModule 注册JS NativeModules访问调用 Native 方法返回结果。
修改配置文件替换图标资源重新编译并运行应用。下面将逐一展开说明。通过本文的介绍,我们了解了如何在OpenHarmony项目中更改应用的名称和图标。这个过程虽然简单,但对于提升应用的识别度和用户体验至关重要。希望本文能够帮助开发者更好地掌握OpenHarmony应用开发技巧,为用户提供更加优质的应用体验。
Flutter 动画性能整体优于 React Native,但差距在缩小(新架构提升 30%)低端设备上 Flutter 领先 10-15fps,是主要的分水岭场景中高端设备上(iPhone 14+、Pixel 7+)差异已缩小到 2-5fpsReact Native 在动画+网络请求的混合场景中更自然Skia/Impeller vs Fabric+JSI 的架构差异是性能差距的根因选型应考虑设备
丰富的第三方渲染器(如 React Native、React VR、React PDF)不过也要注意:跨平台不是银弹。但 React 提供了优雅的降级方案,让你在 80% 的通用场景中享受跨平台的便利,剩下的 20% 特殊需求也能通过“桥接”机制轻松扩展。:把虚拟 DOM 渲染为 3D 场景这种架构就像“指挥官”和“士兵”:指挥官(React 核心)只负责发号施令(逻辑和状态管理),而士兵(渲染器
而React,作为Facebook开源的前端框架,不仅在前端领域占据半壁江山,更通过Next.js等技术栈无缝延伸到后端,成为通往全栈工程师的“捷径”。但React的魅力不止于此:它通过虚拟DOM提升性能,通过Hooks简化状态管理,更通过React生态(如Next.js、React Native)覆盖了从Web到移动端、从客户端到服务端的全栈场景。## 后端延伸:用Next.js实现全栈Next
自定义性能面板的核心思路是:拦截 JS 线程的关键生命周期,在开发模式下注入监控逻辑,通过 Native 侧的浮窗面板实时展示。│ 性能面板 UI (Native View) ││ NativeModules (事件通道)│ JS 性能监控层 (PerformanceMonitor) │React Native 的性能劣化排查需要从三个维度入手:JS 线程执行效率、Bridge 通信负载、原生模块
乘客端 → Taro:H5 + 小程序多端共享代码,Taro 的编译能力直接满足需求。采纳成本 0.5 人月(团队已有 React 基础),小程序端性能接近原生(首屏 380ms),H5 端稍慢但可接受(首屏 650ms)。司机端 → React Native (Fabric):实时导航 + WebSocket 推送,Fabric 架构下地图帧率 58 FPS、交互响应 35ms、WebSocke