ReactNativeText组件修改部分⽂本样式。
静态⽂本:
“Text组件”作为最基础的⽂本组件,我们经常会在其上遇到这样的需求,⼀串⽂本信息,提取部分关键字改变其样式,⽐如⾼亮颜⾊改变等等。
⽐如实现:“我已阅读并同意《使⽤协议》和《隐私条款》。”
通过嵌套Text组件可以很轻松实现。
<Text style={{12,'gray'}}>
我已阅读并同意
<Text style={{'blue'}}>《使⽤协议》</Text>
<Text style={{'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%。
实现思路:
1. 利⽤正则表达式匹配出所有数字:
const keyTextArr = content.match(/-?[0-9]+\.?[0-9]*%?/g);
2. 利⽤正则表达式匹配出其他⾮数字部分:
const restTextArr = content.split(/-?[0-9]+\.?[0-9]*%?/g);
3. 通过for循环组成⼀个新的内容数组,并为匹配出的数字增加样式标签:
const mainTextArr =[];
restTextArr.forEach((item, index)=>{
mainTextArr.push(item);
if(keyTextArr && keyTextArr[index]){
mainTextArr.push(
<Text style={{ color:'blue'}}>
{keyTextArr[index]}
</Text>
);}
});
4. 效果图:
完整代码:
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>
);
}
});
reactnative开发return mainTextArr;
};
return(
<View
style={{
flex:1,
justifyContent:'center',
alignItems:'center',
}}>
<Text style={{ fontSize:12, color:'gray'}}>{renderContent()}</Text>
</View>
);
};
export default HelloWorldApp;

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。