美文网首页
react native 提取字符串中关键字改颜色

react native 提取字符串中关键字改颜色

作者: sheepmiee | 来源:发表于2021-01-25 02:03 被阅读0次

    rn开发中常遇到需求是字符串中提取关键字,将其标注成其他颜色或放大等改变其样式,最近恰好遇到此需求,实现方法如下

    我遇到的需求示例:
    “@周杰伦 你要注意这段歌词,@王力宏@方大同,你俩注意这段旋律”
    上面这段字符串中@的人标蓝色;

    const content = '@周杰伦 你要注意这段歌词,@王力宏@方大同,你俩注意这段旋律';
    const remindUsrs = [
    {name:'周杰伦',code:'1'},
    {name:'王力宏',code:'2'},
    {name:'方大同',code:'3'}
    ];
    
    //@人员列表存在,则将content根据@人员列表分裂成数组
    let contentArr;
    if(remindUser && remindUser.length){
      remindUser.forEach(({name})=>{
        content = content.replace(`@${name}`,`<^replace$>@${name}<^replace$>`);
      });
      contentArr = content.split('<^replace$>');
     }
    
    render(){
      return(
        <Text>
          {
            contentArr ?
              contentArr.map((item,index)=>{
    
                //remindUser列表中的标记蓝色
                if(remindUser.some(user=>`@${user.name}`===item)){
                  return <Text key={'text'+index} style={{color:'blue'}}>{item}</Text>
                }
    
                //item可能为空字符串,不会展示,无妨碍
                return <Text key={'text'+index}>{item}</Text>
              })
              :content
          }
         </Text>
      )
    }
    

    相关文章

      网友评论

          本文标题:react native 提取字符串中关键字改颜色

          本文链接:https://www.haomeiwen.com/subject/lztbzktx.html