ReactNative系列之十九表情emoji與文字混排的兩種方案實現
方案一:
使用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距離
}
問題解決!!
相關推薦
ReactNative系列之十九表情emoji與文字混排的兩種方案實現
方案一:使用react-native-emoji這個庫優點:文字和圖片混排單行多行,居中顯示都正常缺點:依賴手機的環境,只能根據系統裡的表情進行顯示?不能自定義表情。。。emoji...這種方案基本不可行,使用者體驗差方案二:<Text> <Text&
ReactNative系列之十九metro-bundle主要api簡介及優化打包實現
1.RN的打包bundle概要從ReactNative的0.50(準確來講應該是0.4x)之後到目前的最新版本0.55版本,都使用metro-bundle來進行壓縮打bundle檔案。實際上打bundle的好處有幾個1.100個檔案打包成一個檔案,jsCore載入時效率相對高
ReactNative系列之十一原生RN控制元件WebView與Html5之件的呼叫
1、前言系列九講解過使用第三方WebViewBridge與Html5之間的通訊,但在ReatNative0.37之後,增強的WebView的功能,不需要第三方也可以原生支援互調與傳遞資料2、主要程式碼原始碼下載:https://download.csdn.net/downlo
ElasticStack系列之十九 & bulk時 index 和 create 的區別
忽略 使用 sea amp tro creat 嘗試 ron 機制 區別: 兩篇文章 id 都一樣的情況下,index 是將第二篇文章覆蓋第一篇;create 是在第二篇插入的時候拋出一個已經存在的異常 解釋: 在批量請求的時候最好使用 create 方式進行導入。
skyfans之每天一個Liunx命令系列之十九:usermod
今天我們繼續來學習USER INFORMATION AND MANAGEMENT(使用者資訊和管理),今天學習的是什麼命令呢,那就是usermod(修改使用者帳號) Ready Go!!! usermod --help -c, --comment COMMENT 修改使用者賬
Java併發程式設計系列之十九:原子操作類
原子操作類簡介 當更新一個變數的時候,多出現資料爭用的時候可能出現所意想不到的情況。這時的一般策略是使用synchronized解決,因為synchronized能夠保證多個執行緒不會同時更新該變數。然而,從jdk 5之後,提供了粒度更細、量級更輕,並且在多核
ReactNative系列之十八codepush熱更新
目前僅針對Android,iOS後續再補 1、簡介 codepush是微軟的一套熱升級解決實現,還有一種是reactnatie中文網上的react-native-pushy。這兩種方案我都試了下,推薦使用codepush, codepush在github上看文件感覺很麻煩,
IT職場人生系列之十五:語言與技術II
本文是IT職場人生系列的第十五篇本篇延續了技術與語言I的內容(之十二),蒐集了之後大家的一些評論和我的反饋,整理在這裡。“新人學老技術有風險”的實質其實不是說老技術沒有學習的價值了,而是指新人依託老技術存活,風險很大。我自己曾經是一個C++高手,心裡很清楚如果自己親自”無私地
checkbox與文字混排無法對齊到一行的解決辦法
內容 cal 無法 inpu div 解決 一行 name align 直接上代碼: <span><input style="vertical-align:middle" type="checkbox" name="checkbox" /><
9.10 路由控制之反向解析--【別名】html和views兩種方式實現
com 反向 技術分享 http mage login gin bsp 分享圖片 1. 在html裏反向解析 給路徑起別名,修改路徑時,不用每個地方都修改。 {% url ‘Log‘ %} : 就會去找別名為Log的URL,找到 "login/"後把"logi
android實現gif圖與文字混排
public class AnimatedImageSpan extends DynamicDrawableSpan { private Drawable mDrawable; public AnimatedImageSpan(Drawable d) { super();
轉:【Java並發編程】之十九:並發新特性—Executor框架與線程池(含代碼)
接口類 容易 20px 了解 大小 執行c 生命周期 schedule p s Executor框架簡介 在Java 5之後,並發編程引入了一堆新的啟動、調度和管理線程的API。Executor框架便是Java 5中引入的,其內部使用了線程池機制,它在java.
IT職場人生系列之十五 語言與技術II
本文是IT職場人生系列的第十五篇本篇延續了技術與語言I的內容(之十二),蒐集了之後大家的一些評論和我的反饋,整理在這裡。“新人學老技術有風險”的實質其實不是說老技術沒有學習的價值了,而是指新人依託老技術存活,風險很大。我自己曾經是一個C++高手,心裡很清楚如果自己親自”無私地“
ReactNative系列之三十七指定模擬器除錯
前言 React Native執行專案會自動啟動模擬器或者真機,下面為指定啟動模擬器的方法 注意:執行專案之前執行npm install是必須的 1. Android Android執行React Native專案有兩種方式: 1.1 終端 命令列中React nati
清華EMBA課程系列思考之十一 -- 金融市場與投資分析
本次上課之前,同學們早就翹首企盼了,原因是本次的上課老師之一 - 楊之曙老師已然在2月份的課當中講述了管理經濟學當中給了大家非常深刻的印象,以至於在四月份的時候大家又邀請他回來給我們再講述了博弈論,其中的精彩已然在心頭回味,此刻就跟我儘快進入本次課堂,一起開始本次的心路修煉歷
Java模板引擎FreeMarker系列之十freemarker與jquery標誌符衝突怎麼處理
freemarker與jquery標誌符衝突怎麼辦?我們用freemarker做展示層,freemarker語法預設採用<# ></>尖括號形式,為了與html程式碼清晰分離,freemarker還提供[ ]方括號形式,只需配置一下,我們就是採用[]的
Tensorflow深度學習之十九:矩陣切片與連結
1、TensorFlow矩陣切片操作:tf.slice函式 函式原型:slice(input_, begin, size, name=None) 引數: input:待切片的矩陣tensor。 begin:起始位置,表示從哪一個資料開始進行切片。這個起始
實戰Active Directory站點部署與管理,Active Directory系列之十二
實戰Active Directory站點部署與管理 上篇博文中我們家介紹了站點的設計目的及大致原理,今天我們通過實戰為大家介紹如何進行站點的部署以及管理。實驗拓撲如下圖所所示,adtest.com域中有四個域控制器,分別是Florence,Berlin,Firenze和Pe
ReactNative系列之三十二Bundle的結構
bundle結構分析 包括三部分: polyfills : 最早執行的一些function,宣告es語法新增的介面,定義模組宣告方法__d等 module difinitations : 模組宣告,以__d開頭,每一行代表一個JS的定義 require calls
Java經典編程題50道之十九
pub main isp ring args int string class for 打印出如下圖案(菱形) * *** ****** ******** ****** *** * public class E