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

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

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

方案一：

 

使用react-native-emoji这个库

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

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

方案二：

<Text>

    <Text>内容</Text>

    <Image source={{...}}/>  //表示要插入的表情

</Text>

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

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

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

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

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

 

 

问题解决！！