前言
在日常的前端开发中，我们经常需要对文本进行样式定制，在 React Native 中，我们可以使用 Text 组件来实现文本展示，但是其样式定制能力相对较弱，无法满足我们的需求。 因此，市面上出现了许多支持富文本展示的第三方库，其中就包括了本文要介绍的 npm 包—— react-native-subtext。
react-native-subtext 可以为文本中的某些关键词进行高亮显示、下划线显示以及添加点击事件等操作，从而提升应用的可读性和交互体验。 本文将带领大家详细了解如何在 React Native 应用中使用 react-native-subtext，并通过实例代码来加深大家的理解和应用。
安装和引入
安装 react-native-subtext：
npm install react-native-subtext --save
在需要使用的组件中引入：
import Subtext from 'react-native-subtext';
使用方法
高亮显示文本
为了能够高亮显示文本，我们需要先找到要进行高亮处理的关键词。例如，对于某个搜索关键词 “react native”，可以使用如下代码：
<Subtext
value="在 React Native 中应用react native"
highlightText="react native"
highlightStyle={{ color: 'red', fontWeight: 'bold' }}
/>示例代码实现了将 “react native” 高亮显示并加粗，输出的结果如下图所示：
下划线显示文本
下划线显示文本同样可以通过 Subtext 组件来实现，只需要在 highlightStyle 中增加 textDecorationLine: 'underline'，就可以实现对文本的下划线处理了。例如，在某个新闻应用中，对于某个关键词 “疫情”，可以使用如下代码进行下划线处理：
<Subtext
value="据最新消息，全球疫情继续向好"
highlightText="疫情"
highlightStyle={{ color: 'black', fontWeight: 'bold', textDecorationLine: 'underline' }}
/>示例代码实现了将文本中的 “疫情” 添加下划线，输出的结果如下图所示：
添加点击事件
react-native-subtext 还可以为关键词添加点击事件。例如，在某个社区应用中，用户输入的文字里面如果含有用户名，我们就可以为用户名添加点击事件，在点击时跳转到该用户的个人主页。示例代码如下：
-- -------------------- ---- ------- ------------------- - ------ -- - ----- - ---------- - - ----------- ------------------------------- - --------- ---- --- -- -------- ------------------------- -------- ---------------------- ----------------- ------ ---------- ----------- ------ -- ---------------------------------- --
示例代码实现了为用户名 “@minya” 添加点击事件，点击时跳转到该用户的个人主页（UserPage 组件），输出的结果如下图所示：
总结
react-native-subtext 是一款非常方便实用的文本处理工具，在 React Native 应用中可以轻松实现对于文本关键词的高亮、下划线处理和点击事件，本文主要介绍了这三种用法，读者可以根据自己的实际需求来运用它。希望本篇文章能够对大家学习和使用 react-native-subtext 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ad81e8991b448deeba