React Native封装Wix UI Lib Text组件为PoppinsText的写法是否正确？

开发者阿泽

2026-10-3

你的封装思路是合理的，能够满足统一设置全局字体、透传原Text组件所有属性的需求，但存在两处可以优化的细节：

现有实现的样式合并逻辑有风险：你先给Text组件传入了所有props（包含用户自定义的style），再通过React.cloneElement传入{ style: styles.text }，此时后传入的style对象会直接覆盖之前的style，用户自定义的除fontFamily外的所有样式（比如字体大小、颜色、行高）都会丢失，你目前运行正常只是因为测试场景没有传入自定义style。
正确的样式合并写法应该通过数组组合默认样式和用户自定义样式，如果允许用户覆盖默认的fontFamily，把默认样式放数组前列即可：
```
export type PoppinsTextProps = PropsWithChildren<TextProps>

export default function PoppinsText(props: PoppinsTextProps) {
    return <Text {...props} style={[styles.text, props.style]} />
}

const styles = StyleSheet.create({
    text: {
        fontFamily: "Poppins-Medium"
    }
});
```
如果你需要强制全局使用该字体、不允许用户覆盖fontFamily，把默认样式放到数组最后即可：
```
return <Text {...props} style={[props.style, styles.text]} />
```
不需要额外调用React.cloneElement：现有写法等价于先创建一次Text元素、再克隆修改属性，属于不必要的冗余操作，直接在渲染Text组件时处理属性即可，代码可读性和性能都更好。