React Native 响应式源码剖析react-native-responsive-ui 如何实现 MediaQuery 核心机制【免费下载链接】react-native-responsive-uiBuilding responsive UIs in React Native.项目地址: https://gitcode.com/gh_mirrors/re/react-native-responsive-uireact-native-responsive-ui是一个专为 React Native 打造的响应式 UI 库它把浏览器中经典的 MediaQuery媒体查询思想搬到了移动端。只需几行代码就能让界面根据设备宽度、高度、屏幕方向竖屏/横屏自动切换布局。本文将带你快速读懂它的核心机制从窗口尺寸监听到 MediaQuery 条件判定再到组件的显隐控制一次讲透这套响应式 UI 库的完整实现链路。为什么 React Native 需要响应式布局在 Web 上一个网站要同时适配手机、平板和桌面显示器标准答案是 CSS 媒体查询。而 React Native 应用同样要面对各种屏幕尺寸但官方只提供了Dimensions工具来获取尺寸没有提供响应机制。react-native-responsive-ui 正是补上了这块缺失 监听窗口尺寸变化旋转屏幕、分屏、多窗口✅ 用声明式条件如minHeight{450}控制子组件是否渲染 支持按屏幕条件动态切换整套样式表整个库非常轻量核心源码只有 4 个文件 1 个入口全部位于 src/ 目录下非常适合用来学习 React Hook 与响应式设计的结合。整体架构5 个文件看清全貌库的对外出口是 src/index.ts它导出了 4 个核心能力模块文件职责useDimensionssrc/useDimensions.ts订阅并返回窗口宽高尺寸变化时触发更新mediaQuerysrc/MediaQuery.tsx纯函数判断一组查询条件是否成立MediaQuery组件src/MediaQuery.tsx条件成立才渲染子组件useStylesheetsrc/useStylesheet.ts根据条件动态合并多套样式ResponsiveComponentsrc/ResponsiveComponent.tsx面向 Class 组件的同类能力可以看出整个响应式机制分为两层底层是尺寸数据流useDimensions上层是条件渲染MediaQuery。下面逐层拆解。第一步如何监听窗口尺寸变化useDimensions响应式的前提是知道屏幕变了。React Native 的Dimensions模块会在全局尺寸变化时发出change事件useDimensions把这件事封装成了一个 Hook用useState初始化当前窗口宽高取自Dimensions.get(window)在useEffect中注册change监听收到新尺寸就setDimensions组件卸载时移除监听避免内存泄漏完整实现仅 20 行见 src/useDimensions.ts。这里有一个关键设计setDimensions会触发所有使用了该 Hook 的组件重新渲染。也就是说只要屏幕一旋转依赖它的整棵子树都会带着最新宽高重新计算——这就是响应的来源。对应的单元测试 src/tests/useDimensions.test.tsx 验证了这一点调用Dimensions.set模拟尺寸变化后界面中的宽高文本会立即更新。第二步mediaQuery 条件判定算法拿到宽高后如何判断当前屏幕是否满足条件核心是一个纯函数mediaQuery(query, width, height)位于 src/MediaQuery.tsx。它支持的条件项与 Web 媒体查询一脉相承minWidth / maxWidth / minHeight / maxHeight宽高区间minAspectRatio / maxAspectRatio宽高比区间minPixelRatio / maxPixelRatio设备像素密度orientationportrait竖屏或landscape横屏platform限定运行平台如仅 iOS 生效condition任意布尔值方便接入业务逻辑判定逻辑的精髓在于一个工具函数isInIntervalsrc/MediaQuery.tsx(min undefined || value min) (max undefined || value max)一行代码同时处理了只设下限只设上限不设任何限制三种情况——未定义的边界视为无限制。所有数值型条件都复用它最终用一串连接宽、高、宽高比、像素密度必须同时落在各自区间内方向、平台条件要么未设置要么必须匹配横竖屏的判定也很直观width height ? landscape : portrait因为是纯函数它完全可脱离 React 单独调用例如手动计算样式也极易测试。事实 src/tests/MediaQuery.test.tsx 中 20 余个用例覆盖了每一种条件的正反场景。第三步MediaQuery 组件的条件渲染条件函数解决判断组件解决何时渲染。MediaQuery组件的实现只有 8 行src/MediaQuery.tsx流程极其清晰调用useDimensions()拿到实时宽高用 props 构造查询条件调用mediaQuery得到布尔结果结果为true渲染children否则返回null典型用法摘自 README.mdMediaQuery minHeight{450} orientationportrait Logo / /MediaQuery含义是只有当窗口高度不低于 450 且处于竖屏时才显示 Logo。用户旋转屏幕时组件自动显隐无需任何手动干预。测试 src/tests/MediaQuery.test.tsx 中的 should re-render when constraints updated 用例专门验证了条件从假变真后自动重新渲染的行为。进阶useStylesheet 动态样式表显隐控制之外react-native-responsive-ui 还能按条件切换整套样式思路来自 Web 的media规则。你定义一个查询条件 样式的数组useStylesheet会遍历数组对满足条件的样式块做深拷贝用 lodash 的merge把多套命中的样式合并成一份直接返回给style使用实现见 src/useStylesheet.ts。这样你就可以写横屏时按钮横向排列、竖屏时纵向堆叠这类声明式布局规则业务代码与尺寸逻辑彻底解耦。小结三步掌握 React Native 响应式 UI 核心回看整条链路react-native-responsive-ui 的 MediaQuery 机制可以浓缩为三句话useDimensions把Dimensions事件流变成响应式数据源mediaQuery用区间判定把查询条件编译成一个布尔值MediaQuery 组件 / useStylesheet把布尔值翻译成渲染谁、用什么样式这套数据 → 判定 → 渲染的分层设计让每个环节都可独立测试、可组合复用也是它在仅有约百行核心代码的情况下依然健壮的原因。想动手验证可阅读 src/tests/ 下的完整测试用例或参考 example/src/App.tsx 中的示例工程。【免费下载链接】react-native-responsive-uiBuilding responsive UIs in React Native.项目地址: https://gitcode.com/gh_mirrors/re/react-native-responsive-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考