如何在React Native中直接使用px、%、rem等CSS维度单位？

嘿，这个问题我之前刚折腾过！React Native本身确实不支持直接写px、%、rem这类常规CSS单位——毕竟它的布局系统是基于Flexbox和*密度无关像素（dp）*设计的，但有几个实用的方法能让你近似实现这些单位的效果，甚至更适配跨平台：

1. 用第三方库快速适配（最省心） #

最推荐的是react-native-size-matters，这个库专门解决跨屏幕尺寸适配的问题，还能让你用类似CSS单位的写法。

首先安装依赖：

npm install react-native-size-matters --save
# 或者用yarn
yarn add react-native-size-matters

然后就可以像这样用：

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

// 替代CSS中的16px宽度（自动适配不同屏幕密度）
<View style={{ width: scale(16), marginVertical: verticalScale(8) }} />
// 替代14px字体，同时兼顾不同屏幕的可读性
<Text style={{ fontSize: moderateScale(14) }}>Hello World</Text>

scale()对应水平方向的px转换，verticalScale()对应垂直方向，moderateScale()会根据屏幕大小适度调整，避免小屏幕上元素过大。

2. 自己封装转换工具函数（灵活可控） #

如果不想引入第三方库，完全可以自己写简单的转换函数，适配你的设计稿：

把px转成RN的dp #

假设你的设计稿是基于iPhone 12的390px宽度，那么可以这样写：

import { Dimensions, PixelRatio } from 'react-native';

const { width: screenWidth } = Dimensions.get('window');
// 设计稿宽度
const designWidth = 390;

// px转dp函数
const pxToDp = (pxValue) => {
  return pxValue * (screenWidth / designWidth);
};

// 使用示例：对应设计稿的50px宽度
<View style={{ width: pxToDp(50), height: pxToDp(50) }} />

实现%的效果 #

RN本身不支持直接写width: 50%，但可以通过获取屏幕尺寸计算，或者用Flex布局替代：

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

// 方法1：直接计算百分比
<View style={{ width: width * 0.5 }} /> // 占屏幕宽度50%

// 方法2：用Flex布局（更推荐，适合多元素分配空间）
<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1 }} /> // 占50%宽度
  <View style={{ flex: 1 }} /> // 占50%宽度
</View>

实现rem的效果 #

参考Web中rem的逻辑，先定义一个“根字体大小”，然后其他单位基于它转换：

import { PixelRatio } from 'react-native';

// 根字体大小（相当于Web中的html { font-size: 16px }）
const baseFontSize = 16;

// rem转换函数
const rem = (value) => {
  return value * baseFontSize * PixelRatio.getFontScale();
};

// 使用示例：对应2rem的字体大小
<Text style={{ fontSize: rem(2) }}>This is 2rem text</Text>

3. 额外提醒 #

• React Native中直接写数字就是dp单位，比如width: 50相当于50dp，这是RN原生推荐的写法，如果你能适应的话，其实是最简洁的。
• 优先用Flex布局实现响应式，比硬写百分比或px更适配不同设备。
• 如果用第三方库，尽量选维护活跃的版本，避免后续出现兼容性问题。

内容的提问来源于stack exchange，提问作者Nikunj V