React Native元件解析 二 之Text

2022-04-17 11:21:16 字數 1342 閱讀 3692

text元件對應於ios的uilabel,android的textview,用來顯示文字。但是text元件的內部使用的並不是flexbox布局,而是文字布局,所以如果想要使文字居中,需要在text元件的外層套一層view,設定view的flexbox

style屬性名

取值說明

fontfamily

enum('sans-serif', 'serif','monospace','sans-serif-light','sans-serif-thin','sans-serif-condensed','sans-serif-medium')

英文本串的樣式

fontsize

number

字型大小

fontstyle

enum('normal', 'italic')

字型風格是普通還是斜體

fontweight

enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

字型粗細程度

style屬性名

取值說明

textshadowcolor

color

陰影顏色

textshadowoffset

陰影效果

textshadowradius

number

陰影圓角

style屬性名

取值說明

textalign

enum('auto', 'left', 'right', 'center', 'justify')

對齊方式

textdecorationline

enum('none', 'underline', 'line-through', 'underline line-through')

橫線相關設定

lineheight

number

行高numberoflines

number

行數,同ios,0:不限制行數

adjustsfontsizetofit

bool

預設值為false,為true時字型會自動縮小,以適應給定的樣式約束

minimumfontscale

number

為true時,設定字型的最小縮放比例,取值範圍為0.01~1.0

style屬性名

取值說明

onpress

function

點選**

onlongpress

function

長按**

具體可檢視相關官方apitext

React Native 元件集合

1 display 該屬性用來指定元素是否為伸縮容器 flex inline flex flex用於產生塊級伸縮容器 inline flex用於產生行級伸縮容器 2 flexdirection 該屬性指定主軸方向 row row reverse column column reverse row 預...

ReactNative元件匯出

如果對rn開發有一定的了解的話,就會發現,reactnative提供的元件不能完全滿足開發的需求,就需要自定義一些元件,那麼如何匯出全域性的自定義元件呢?元件匯出有兩種形式 開發者一般使用預設元件匯出 首先在專案下面新建乙個資料夾rn design rn design就是乙個自己的元件庫類似於rea...

react native引導畫面元件

rn viewpager ios android react native material design android import from rn viewpager 引入必要依賴元件,其餘元件自行引入 style 必須flex 1 style 自定義右側頭部按鈕 style style 跳過...