react-native code之路
使用Flexbox布局
容器的屬性
1、Flex Direction
在組件的
style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列，還是沿著豎直軸(column)方向排列呢择份？默認(rèn)值是豎直軸(column)方向。
2、Flex Wrap
3炬灭、Justify Content
在組件的
style中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢靡菇？亦或應(yīng)該均勻分布担败？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center镰官、flex-end提前、space-around以及space-between。
4泳唠、Align Items
項(xiàng)目的屬性
1狈网、Flex
2、Align Self
react-native原生控件
Text
一個(gè)用于顯示文本的React組件笨腥，并且它也支持嵌套拓哺、樣式，以及觸摸處理脖母。在下面的例子里士鸥，嵌套的標(biāo)題和正文文字會(huì)繼承來(lái)自
styles.baseText的fontFamily字體樣式，不過(guò)標(biāo)題上還附加了它自己額外的樣式谆级。標(biāo)題和文本會(huì)在頂部依次堆疊烤礁，并且被代碼中內(nèi)嵌的換行符分隔開(kāi)讼积。
屬性
adjustsFontSizeToFit bool
指定字體是否隨著給定樣式的限制而自動(dòng)縮放。
allowFontScaling bool
控制字體是否要根據(jù)系統(tǒng)的“字體大小”輔助選項(xiàng)來(lái)進(jìn)行縮放脚仔。
ios minimumFontScale bool
當(dāng)adjustsFontSizeToFit開(kāi)啟時(shí)勤众，指定最小的縮放比（即不能低于這個(gè)值）±鹪啵可設(shè)定的值為0.01 - 1.0
numberOfLines number
用來(lái)當(dāng)文本過(guò)長(zhǎng)的時(shí)候裁剪文本们颜。包括折疊產(chǎn)生的換行在內(nèi)，總的行數(shù)不會(huì)超過(guò)這個(gè)屬性的限制猎醇。
testID string
用來(lái)在端到端測(cè)試中標(biāo)記這個(gè)視圖窥突。
ios suppressHighlighting bool
當(dāng)為true時(shí)，如果文本被按下硫嘶，則沒(méi)有任何視覺(jué)效果波岛。默認(rèn)情況下，文本被按下時(shí)會(huì)有一個(gè)灰色的音半、橢圓形的高光则拷。
style
color color
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字體的粗細(xì)。大多數(shù)字體都支持'normal'和'bold'值曹鸠。并非所有字體都支持所有的數(shù)字值煌茬。如果某個(gè)值不支持，則會(huì)自動(dòng)選擇最接近的值彻桃。
lineHeight number
textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的對(duì)齊方式坛善。其中'justify'值僅iOS支持，在Android上會(huì)變?yōu)閘eft
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
textShadowColor color
textShadowOffset {width: number, height: number}
textShadowRadius number
android includeFontPadding bool
Android在默認(rèn)情況下會(huì)為文字額外保留一些padding邻眷，以便留出空間擺放上標(biāo)或是下標(biāo)的文字眠屎。對(duì)于某些字體來(lái)說(shuō)，這些額外的padding可能會(huì)導(dǎo)致文字難以垂直居中肆饶。如果你把
textAlignVertical設(shè)置為center之后改衩，文字看起來(lái)依然不在正中間，那么可以嘗試將本屬性設(shè)置為false.
android textAlignVertical enum('auto', 'top', 'bottom', 'center')
ios fontVariant [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]
ios letterSpacing number
ios textDecorationColor color
ios textDecorationStyle enum('solid', 'double', 'dotted', 'dashed')
ios writingDirection enum('auto', 'ltr', 'rtl')
TouchableOpacity
本組件用于封裝視圖驯镊，使其可以正確響應(yīng)觸摸操作葫督。當(dāng)按下的時(shí)候，封裝的視圖的不透明度會(huì)降低板惑。這個(gè)過(guò)程并不會(huì)真正改變視圖層級(jí)橄镜，大部分情況下很容易添加到應(yīng)用中而不會(huì)帶來(lái)一些奇怪的副作用。（譯注：此組件與TouchableHighlight的區(qū)別在于并沒(méi)有額外的顏色變化冯乘，更適于一般場(chǎng)景）
例子：
renderButton: function() {
return (
<TouchableOpacity activeOpacity={0.5}
onPress={this._onPressButton}>
<Image
style={styles.button}
source={require('image!myButton')}
/>
</TouchableOpacity>
);
},
屬性
activeOpacity number
指定封裝的視圖在被觸摸操作激活時(shí)以多少不透明度顯示（通常在0到1之間）
