React Native Text多样式使用

最新推荐文章于 2025-08-28 10:20:24 发布

原创最新推荐文章于 2025-08-28 10:20:24 发布 · 983 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

React Native 同时被 2 个专栏收录

4 篇文章

订阅专栏

android

2 篇文章

订阅专栏

本文介绍了在React Native中如何实现类似Objective-C的NSMutableAttributedString效果，通过使用Text组件结合换行符和lineHeight属性来创建多样式文本。尽管React Native没有lineSpacing属性，但可以通过设置lineHeight实现行间距，并通过在Text组件内嵌套View来处理不同字体大小的居中对齐问题。需要注意View的width、height及内边距的设置。

实现类似Objective-C里面NSMutableAttributedString的文字多样式的方法如下：

<Text>
    <Text style={{color: "red"}}>Hello</Text>
    <Text style={{color:"blue"}}>World</Text>
</Text>

实现效果如下：

文本换行添加\n就可以，如下

<Text>
    <Text style={{color: "red"}}>{"每天学习一点点\n"}</Text>
    <Text style={{color:"blue"}}>每天成长一点点</Text>
</Text>

效果如下：

React Native里面没有 lineSpacing的概念，但是可以设置lineHeight实现行之间的举例，比如：

<Text style={{lineHeight:20}}>
      <Text style={{color: "red"}}>{"每天学习一点点\n"}</Text>
      <Text style={{color:"blue"}}>每天成长一点点</Text>
</Text>

效果如下：

在设置lineHeight后，有时单行有时需要考虑字体不一样，但是内容还需要上下居中，目前没有找到很好的办法，我目前的解决方式是在子<Text>上包一层<View>,不过需要注意 View需要设置width和height样式,然后设置<Text> marginTop||<View> PaddingTop进行相应的偏移。