React Native封装Text组件在Web模拟器中样式无法覆盖问题

我之前在开发RN Web项目时也碰到过一模一样的问题，本质是React Native Web（Expo在浏览器中基于它渲染）在样式合并优先级和字体属性解析上，和原生RN存在细微差异。咱们一步步来搞定它：

问题根源拆解 #

你当前用对象展开运算符{...basicStyles, ...props.style}合并样式，这种写法在原生RN里完全没问题，但RN Web处理字体类样式时，会因为样式对象的合并逻辑，导致自定义样式的优先级没生效。另外，你写的fontFamily是逗号分隔的字符串，RN Web对这种格式的解析不如数组形式稳定。

具体解决方案 #

1. 用StyleSheet.flatten替代对象展开 #

RN官方提供的StyleSheet.flatten方法能更可靠地合并样式数组，确保传入的自定义样式优先级高于基础样式，彻底解决覆盖失效的问题。

2. 将fontFamily改为数组格式 #

RN支持用数组定义字体族的优先级顺序，Web端对这种格式的解析更准确，能避免逗号分隔字符串可能带来的解析异常。

修改后的完整代码 #

import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { rsz } from 'shared/responsiveSize';

export const SimpleText = (props) => {
  // 用StyleSheet.flatten合并样式数组，保证自定义样式优先生效
  const mergedStyle = StyleSheet.flatten([basicStyles, props.style]);
  return <Text style={mergedStyle}>{props.children}</Text>;
};

const basicStyles = StyleSheet.create({
  // 改用数组定义字体族，提升Web端兼容性
  fontFamily: ['Lucida Grande', 'Tahoma', 'Verdana', 'Arial', 'sans-serif'],
  fontWeight: 'bold',
  fontSize: rsz(16)
});

验证方法 #

修改后在Chrome移动模拟器里测试你的使用代码：

<SimpleText style={{fontSize: 32}}>Hello world</SimpleText>

此时应该能看到字号被正确覆盖为32，其他基础样式也能被自定义样式正常修改。

额外小提示 #

如果还是有异常，可以检查下rsz函数在Web环境下的返回值——有时候响应式尺寸函数在Web和原生平台的计算逻辑不一致，也可能导致样式表现不符合预期。

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