ReactNative系列之十九表情emoji与文字混排的两种方案实现

注:2019/12/06,升级最新RN0.61,新版RN源代码已经适配了我改的地方(但新版本的源码在纯表情的时候计算的有bug, 我的改法依然没问题~量力使用吧)

以下方案在RN0.51上做的修改

方案一:

 

使用react-native-emoji这个库

优点:文字和图片混排单行多行,居中显示都正常

缺点:依赖手机的环境,只能根据系统里的表情进行显示?不能自定义表情。。。emoji...这种方案基本不可行,用户体验差

ReactNative系列之十九表情emoji与文字混排的两种方案实现_第1张图片

方案二:

    内容

      //表示要插入的表情

这种方案可以解决文字超一行后,表情能自动换行,但图片会较文字偏上一些。

ReactNative系列之十九表情emoji与文字混排的两种方案实现_第2张图片

解决办法:在iOS上设置padding 会使表情和文字都居中

在Android上,Image使用Fresco渲染,只实现了width和height两个属性,并且表情按字体的最高开始渲染。

解决方法:在FrescoBasedReactTextInlineImageSpan.java中的draw方法中,重新计算渲染的表情的位置即可,添加行

    if (y != bottom) { //如果相等则为纯表情,否则为表情和文字混合
      transY = transY + (bottom - y) / 2 + 4; // [wk] 最右上角y值+ (最高度/2) + 字体一般的padding距离
    }

 

ReactNative系列之十九表情emoji与文字混排的两种方案实现_第3张图片

 

问题解决!!

 

你可能感兴趣的:(ReactNative跨平台)