React Native Text组件修改部分文本样式。

最新推荐文章于 2024-10-12 15:09:38 发布

user95

最新推荐文章于 2024-10-12 15:09:38 发布

阅读量1.7k

点赞数 1

分类专栏： react native 文章标签： react native stylesheet javascript reactnative

本文链接：https://blog.csdn.net/c1024197824/article/details/121436588

版权

react native 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

静态文本：

“Text组件”作为最基础的文本组件，我们经常会在其上遇到这样的需求，一串文本信息，提取部分关键字改变其样式，比如高亮颜色改变等等。

比如实现：“我已阅读并同意《使用协议》和《隐私条款》。”

通过嵌套Text组件可以很轻松实现。

<Text style={{ fontSize: 12, color: 'gray' }}>
	我已阅读并同意
	<Text style={{ color: 'blue' }}>《使用协议》</Text>
	和
	<Text style={{ color: 'blue' }}>《隐私条款》</Text>
	。
</Text>

动态文本：

固定模板的静态文本很容易实现部分文本样式的修改，但是当文本关键字不固定的时候，比如动态传入一串文本，高亮其中所有数字（这里暂取整数、浮点数、百分数）。可以采用如下方法：

原文：

2019年10月到2020年9月，Github上开发者数量超过5600万；72%的财富50强公司在使用Github；超6000万新项目被创建；超过19亿的贡献被添加。在活跃用户的地理分布上，北美用户最多（34%），不过相较于去年北美用户减少了2%；亚洲次之（30.7%），亚洲用户增长了1.1%。这是负数-66.66%。

期望结果：

2019年10月到2020年9月，Github上开发者数量超过5600万；72%的财富50强公司在使用Github；超6000万新项目被创建；超过19亿的贡献被添加。在活跃用户的地理分布上，北美用户最多（34%），不过相较于去年北美用户减少了2%；亚洲次之（30.7%），亚洲用户增长了1.1%。这里是负数-66.66%。

实现思路：

利用正则表达式匹配出所有数字：

const keyTextArr = content.match(/-?[0-9]+\.?[0-9]*%?/g);

利用正则表达式匹配出其他非数字部分：

const restTextArr = content.split(/-?[0-9]+\.?[0-9]*%?/g);

通过for循环组成一个新的内容数组，并为匹配出的数字增加样式标签：

const mainTextArr = [];
restTextArr.forEach((item, index) => {
    mainTextArr.push(item);
    if (keyTextArr && keyTextArr[index]) {
    	mainTextArr.push(
      		<Text style={{ color: 'blue' }}>
      			{keyTextArr[index]}
      		</Text>
      	);}
});

效果图：

完整代码：

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  const renderContent = () => {
    let content =
      '2019年10月到2020年9月，Github上开发者数量超过5600万；72%的财富50强公司在使用Github；超6000万新项目被创建；超过19亿的贡献被添加。在活跃用户的地理分布上，北美用户最多（34%），不过相较于去年北美用户减少了2%；亚洲次之（30.7%），亚洲用户增长了1.1%。这是负数-66.66%。';

    const keyTextArr = content.match(/-?[0-9]+\.?[0-9]*%?/g);
    const restTextArr = content.split(/-?[0-9]+\.?[0-9]*%?/g);
    const mainTextArr = [];
    restTextArr.forEach((item, index) => {
      mainTextArr.push(item);
      if (keyTextArr && keyTextArr[index]) {
        mainTextArr.push(
          <Text style={{ color: 'blue' }}>{keyTextArr[index]}</Text>
        );
      }
    });

    return mainTextArr;
  };

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text style={{ fontSize: 12, color: 'gray' }}>{renderContent()}</Text>
    </View>
  );
};
export default HelloWorldApp;