React Native的适配主要可以分为 屏幕尺寸适配、分辨率适配、刘海屏/全面屏适配、横竖屏适配 四大类。下面是一套比较完整的适配方案，也是目前公司项目最常采用的实践。

一、屏幕尺寸适配

使用者痛点：不同机型 UI 比例失衡。页面在小屏手机上被挤压，在大平板上出现大量空白。

说到方案一，Flex 布局

RN 官方推荐看看使用 Flex 布局完成整体页面结构。

• 不需要手动计算高度或宽度。
• 不同尺寸设备会自动拉伸，保持比例一致。老实说，
• Android 与 iOS 表现一致。

适用于页面布局、列表、Header/Footer 等场景。

方案二的观点是。百分比布局

RN 一样支持百分比写法，适合对宽高有明确比例要求的组件。

常用于 Banner、图片卡片等固定比例需求。

从方案三来看，Dimensions 获取真实宽高

import { Dimensions } from 'react-native';const { width,height } = Dimensions.get;console.log，说起来，

从示例来看。图片高度，

二、分辨率适配

使用者痛点：在高密度屏幕上 UI 元素显得过小或过大，导致点击区域不够或视觉不舒适。

RN 使用的是 dp而不是 px。按理说，所有尺寸默认以 dp 为单位，程序会自动映射到对应的物理像素。

PixelRatio 获取设备像素比

import { PixelRatio } from 'react-native';const pixelRatio = PixelRatio.get;按理说，// 如 iPhone 12 为 3
const realPx = PixelRatio.getPixelSizeForLayoutSize;按理说，// 将 100dp 转为真实像素

字体适配

字体大小一样基于 dp。可通过 PixelRatio.getFontScale 获取程序字体缩放系数，实现自定义缩放逻辑：

const fontScale = PixelRatio.getFontScale;const adjustedFontSize = 16 / fontScale;// 保持视觉一致性

更便捷的做法是使用 提供的 moderateScale 方法统一处理文字与布局尺寸。

三、基于设计稿的屏幕缩放适配

使用者痛点：#️⃣ “直接写死宽高”导致代码难维护；#️⃣ 不同机型需要频繁调试尺寸。

公司项目普遍采用「设计稿 → scale → 实际尺寸」的思路，将所有硬编码数值统一通过一个函数转化为对应设备上的实际大小。

自行实现 scale 函数

import { Dimensions } from 'react-native';const { width,height } = Dimensions.get;const BASE_WIDTH = 375;// iPhone 6/7/8 的宽度作为基准
const BASE_HEIGHT = 667;// 基准高度
export const scale = size => * size;export const verticalScale = size => * size;export const moderateScale = =>
size + - size) * factor;

使用示例的观点是，

自适应文字

说到推荐库。react-native-size-matters

import { scale,verticalScale,moderateScale } from 'react-native-size-matters';const styles = StyleSheet.create({
container: {
从width来看，scale。height: verticalScale,padding: moderateScale
},title: {
fontSize: moderateScale
}
});

四、刘海屏 / 全面屏安全区适配

使用者痛点：#️⃣ 内容被刘海或手势条遮挡；#️⃣ 在不同品牌上安全区差异大，手动处理繁琐。

SafeAreaView

import { SafeAreaView } from 'react-native-safe-area-context';
export default function App {
return (

{/* 页面内容 */}

);}

*注意*: 请使用 @react-native-community/react-native-safe-area-context。而非 RN 自带的 { SafeAreaView },前者对 Android 支持更完善。

`useSafeAreaInsets` 动态获取 inset 值

import { useSafeAreaInsets } from 'react-native-safe-area-context';function Header {
const insets = useSafeAreaInsets;return (

{/* Header 内容 */}

);}

全屏页面示例

{/* 视频组件 */}

五、状态栏适配

User Pain Point:#️⃣ 状态栏颜色与页面背景冲突，导致阅读困难；#️⃣ Android 上状态栏透明后内容被遮挡。

import { StatusBar } from 'react-native';import { useSafeAreaInsets } from 'react-native-safe-area-context';function MyScreen {
const insets = useSafeAreaInsets;return (
<>


{/* 页面主体 */}

);}

六、横竖屏切换适配

User Pain Point:#️⃣ 屏幕旋转后布局未更新，需要手动刷新页面；#️⃣ 某些组件在竖屏下溢出或变形。

`Dimensions` 监听方式

Dimensions.addEventListener => {
console.log;})，

`useWindowDimensions` Hook

import { useWindowDimensions } from 'react-native';function ResponsiveBox {
const { width,height } = useWindowDimensions;老实说，return (

);}

七、图片自适应

User Pain Point:#️⃣ 高分辨率图片导致内存使用激增；#️⃣ 不同尺寸设备上图片拉伸失真。

• `resizeMode` 常用值：`contain`,`cover`。`stretch`,`center`.
• ` 等第三方库实现缓存和按需加载，提高性能。

jsx ;

八、全局字体缩放控制

User Pain Point:#️⃣ Android 程序字体放大后 UI 打乱布局；#️⃣ iOS 动态类型导致文字超出容器范围。老实说，

• `allowFontScaling={false}` 可关闭程序字体放大对单个 `` 的影响。
• ` 组件，实现全局控制并结合 `moderateScale` 完成字号自适应：

jsx // components/AppText.js import React from 'react';其实，import { Text } from 'react-native';import { moderateScale } from 'react-native-size-matters';

export default function AppText { return ( ="" <="" allowfontscaling="{false}" moderatescale},="" style="{}="" text="" {...rest}="" {children}="">);}

九、建议项目目录结构

text src/ ├─ assets/ ├─ components/ │ ├─ Screen.tsx // 包装 SafeAreaView 的通用容器 │ └─ AppText.tsx // 全局文字组件 ├─ hooks/ │ └─ useSafeArea.ts // 封装 safe area inset Hook ├─ utils/ │ └─ scale.ts // 导出 scale/verticalScale/moderateScale + 常量 SCREEN_WIDTH/HEIGHT └─ screens/ └─ HomeScreen.tsx

scale.ts

javascript import { Dimensions } from 'react-native';export const SCREENWIDTH = Dimensions.get.width;说起来，export const SCREENHEIGHT = Dimensions.get.height;不过，

export { scale,verticalScale。moderateScale } from 'react-native-size-matters';

Screen.tsx

jsx import React from 'react';不过，import { SafeAreaView } from 'react-native-safe-area-context';话说回来，

使用方式

jsx // 任意页面中统一包裹： {/* 页面内容 */} ;

十、公司级常用方法汇总表

\ \ \ StatusBar 样式与透明度"\ \ \ \

场景/需求	推荐方法/库
整体页面布局	- Flex 布局 - 封装 Screen
L​宽高自适应	- react-native-size-matters 提供 scale / verticalScale / moderateScale - 基于基准宽度 实现统一缩放
文字大小统一 - AppText 封装 allowFontScaling={false} + moderateScale
L​刘海/全面屏安全区处理"- react-native-safe-area-context 的 与 useSafeAreaInsets
- 在根组件配置 并结合 inset top 填充
横竖屏响应 "	Hook : useWindowDimensions 或监听 Dimensions.addEventListener 自动更新布局
图片展示调整 "	合理选择 resizeMode=cover|contain;如有需求可引入 做缓存和按需加载
跨网站像素密度处理 "	全部使用 dp 单位；话说回来，必要时通过 PixelRatio.getPixelSizeForLayoutSize 获取真实像素值进行精细控制
状态栏+安全区融合 "	将状态栏透明化后将顶部 padding 设置为 {insets.top} 确保内容不被遮挡

---

以上内容已按照「使用者痛点」重新组织排版。方便你定位并解决 RN 项目中常见的尺寸与安全区兼容问题。祝开发顺利，

。

---