React Native自定义View解析Emoji

一、需求准备

在react native的类中实现可以解析多种字符格式的内容并放入到指定文本中。效果图如下:

emoji_example_1

二、Emoji封装

将需要对应好的Emoji表情图片放到指定文件夹,然后写一个公共的Const.js封装成一个对象,实现变量与图片资源的关系映射:

export const emojiReflection = {
    // emoji表情对应关系
    "[微笑]": require('../emojiImage/emoji_1.png'),
    "[呲牙]": require('../emojiImage/emoji_2.png'),
    "[偷笑]": require('../emojiImage/emoji_3.png'),
    ……
}

三、生命周期方法的简单处理

这里只针对于子文本的展示,实际效果是将该文本放到一个ListView的item中,其功能实现无大差异,只需在外层包一个ListView即可。所以这里只需将这个文本放入一个Text标签中。
  这里加入了对文本高度的判断,超过了4行只展示4行,并展示出“更多”按钮,由于设置了行高为20,只需在onLayout( )方法中对高度设置监听处理即可。

return (
  <View>
    <Text key={'textMore'} style={{ lineHeight: 20, maxHeight: this.state.rowHeight }}
      onLayout={this.state.textState == 1 ? (e) => {
        let {x, y, width, height} = e.nativeEvent.layout;
        if (Math.ceil(height / 20) > 4 && this.state.textState == 1) {
          this.setState({ textState: 2, rowHeight: 80 });
        } else {
          this.setState({ rowHeight: height });
        }
      } : null}>
      {this.state.Views}
    </Text>
    {showMore}
  </View>
);

其中,这里的this.state.Views是一个数组,用于存放截取处理后的各个子View。可在constructor( )或componentWillMount( )方法中定义:

constructor() {
    super();
    this.state = {
        rowHeight: 10000,
        textState: 1,
        Views: [],
    }
}

这里,在componentWillMount( )方法中接收指定字符串textContent(当然你完全可以自定义一个你想要的String):

componentWillMount() {
    let textContent = this.props.textContent;
    this.matchContentString(textContent);
}

匹配的逻辑与思路

这里用到的是正则匹配的方法,先定义出三种匹配规则,即匹配[微笑]格式的emoji表情、匹配@...格式的文本、匹配http://www.baidu.com 格式的网址。
  先使用正则定义好匹配方法:

let emojiReg = '\\[[^\\]]+\\]';
let nameReg = '@([^\\s@]+)';
let httpReg = '((https://|http://|www\.|ftp://)[A-Za-z0-9\._\?%&;:+\-=/#]*)';
let emojiAt = new RegExp(emojiReg);
let nameAt = new RegExp(nameReg);
let httpAt = new RegExp(httpReg);

然后开始写一个方法,实现自己的思路:将一个字符串按三种匹配规则匹配,得到3个index,取最小者,将这个字符串拆分成三部分,即0-index,index,index-end。然后0-index部分直接返回一个文本,index部分再分别处理,然后将最后的index-end部分实现递归,直到最终的index为-1,即只剩下纯文本为止。

matchContentString(textContent) {
    // 匹配得到3个index并放入数组中
    let emojiIndex = textContent.search(emojiAt);
    let nameIndex = textContent.search(nameAt);
    let httpIndex = textContent.search(httpAt);
    let checkIndexArray = [];
    // 若匹配不到,则直接返回一个全文本
    if (emojiIndex === -1 && nameIndex === -1 && httpIndex === -1) {
        let emptyTextView = (<Text key ={'emptyTextView'+(Math.random()*100)}>{textContent}</Text>);
        this.state.Views.push(emptyTextView);
    } else {
      if (emojiIndex !== -1) checkIndexArray.push(emojiIndex);
      if (nameIndex !== -1) checkIndexArray.push(nameIndex);
      if (httpIndex !== -1) checkIndexArray.push(httpIndex);
      // 取index最小者
      let minIndex = Math.min.apply(Math, checkIndexArray);
      // 将0-index部分返回文本
      let firstTextView = (<Text key ={'firstTextView'+(Math.random()*100)}>{textContent.substring(0, minIndex)}</Text>);
      this.state.Views.push(firstTextView);
      // 将index部分作分别处理
      switch (minIndex) {
        case emojiIndex:
          this.matchEmojiString(textContent.substring(minIndex));
          break;
        case nameIndex:
          this.matchNameString(this.props.ats, this.props.atDeparts, textContent.substring(minIndex));
          break;
        case httpIndex:
          this.matchHttpString(textContent.substring(minIndex));
          break;
        default:
          break;
      }
    }
}

如上代码,可看到,每执行一次比较处理index的思路就会将原文本拆分成三部分,然后再分别处理。这样的定位index会比较明确。下面就再实现一下具体的三种处理方式:

【处理带emoji表情的】

matchEmojiString(emojiStr) {

    let castStr = emojiStr.match(emojiAt);
    let emojiLength = castStr[0].length;
    let imageView = (<Image key={emojiStr} style={{ width: 15, height: 14 }} source={emojiReflection[castStr]} />);
    this.state.Views.push(imageView);
    this.matchContentString(emojiStr.substring(emojiLength));

}

【处理带@...文本的】

matchNameString(ats, atDeparts, nameStr) {

    let castStr = nameStr.match(nameAt);
    let nameString = castStr[0];
    let atUser = null;
    let atMyDeparts = null;
    if (ats && ats.length > 0) {
      atUser = ats[0];
    }
    if (atUser == null && atDeparts && atDeparts.length > 0) {
      atMyDeparts = atDeparts[0];
    }

    let nameView = (<CustomTextView key={'name' + nameStr} textContent={nameString} contentType={'name'} atUser={atUser} atDeparts={atMyDeparts} />);
    this.state.Views.push(nameView);
    this.matchContentString(nameStr.substring(nameString.length));

}

【处理带http:...网址的】

matchHttpString(httpStr) {

    let castStr = httpStr.match(httpAt);
    let httpString = castStr[0];
    let httpView = (<CustomTextView key={'http'+httpString} textContent={httpString} contentType={'http'} />);
    this.state.Views.push(httpView);
    this.matchContentString(httpStr.substring(httpString.length));

}

其中CustomTextView只是一个简单的自定义View,只实现如跳转链接,改变字体颜色等功能,完全可以自定义,在这里就不贴代码了。
  最终,一个满足三种匹配的自定义View就实现啦,看下效果咯~


emoji_example_2

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 165,909评论 24 701
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 130,490评论 18 138
  • 概述 iOS系统相机、相册功能全部依托于图像选取控制器UIImagePickerController,在使用该控制...
    蚊香酱阅读 4,534评论 3 48
  • 表白就是冒着以后连朋友都不能做的危险去赌以后能正大光明牵你手拥抱你爱着你的机会 ...
    刘皓永远都是刘皓阅读 144评论 0 0
  • 2.28 火 早上起床还蛮早,结果还是8点多还在匆匆准备出门,去到公司对桌的同事看到我说,你忘记画眉了,马上想着向...
    ancilapple阅读 115评论 0 0