如何在React Native的Android和iOS端使用rem字体大小？求解决方案

方案一：自定义rem转换工具函数 #

React Native本身不支持rem单位，但可以通过自定义函数将rem转成RN支持的逻辑像素（类似dp），核心是基于根字体大小做比例转换：

1. 创建工具文件：

// utils/rem.js
import { Dimensions } from 'react-native';

// 可选：根据屏幕宽度动态适配（以375px设计稿、根字体16px为例）
const { width } = Dimensions.get('window');
const BASE_FONT_SIZE = (16 / 375) * width;

// 固定根字体的话直接写死：const BASE_FONT_SIZE = 16;
export const rem = (value) => value * BASE_FONT_SIZE;

2. 在样式中使用：

import { StyleSheet } from 'react-native';
import { rem } from './utils/rem';

const styles = StyleSheet.create({
  title: {
    fontSize: rem(1.5), // 对应1.5rem
    padding: rem(0.5),
  },
});

方案二：修复react-native-extended-stylesheet的使用配置 #

你之前安装的库并非只支持Web，大概率是初始化或使用方式错误，正确步骤如下：

1. 入口文件初始化（如App.js）：

import EStyleSheet from 'react-native-extended-stylesheet';

// 设置rem基准值，1rem = 16dp
EStyleSheet.build({
  $rem: 16,
});

2. 使用EStyleSheet替代原生StyleSheet：

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  subtitle: {
    fontSize: '1.2rem', // 直接使用rem单位
    color: '#333',
  },
});

如果仍不生效，尝试更新库到最新版本：

npm update react-native-extended-stylesheet

方案三：基于CSS-in-JS库自定义单位（如styled-components） #

如果你项目使用styled-components这类CSS-in-JS库，可以直接在样式中解析rem：

import styled from 'styled-components/native';
import { Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const baseFontSize = (16 / 375) * width;

const StyledText = styled.Text`
  font-size: ${props => `${props.size * baseFontSize}px`};
`;

// 使用示例
<StyledText size={1.8}>自定义rem字体</StyledText>

内容的提问来源于stack exchange，提问作者umair ali