react-native code之路
使用Flexbox布局
容器的属性
1、Flex Direction
在组件的
style
中指定flexDirection
可以决定布局的主轴。子元素是应该沿着水平轴(row
)方向排列,还是沿着竖直轴(column
)方向排列呢?默认值是竖直轴(column
)方向。
2、Flex Wrap
3、Justify Content
在组件的
style
中指定justifyContent
可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项有:flex-start、center、flex-end、space-around
以及space-between
。
4、Align Items
项目的属性
1、Flex
2、Align Self
react-native原生控件
Text
一个用于显示文本的React组件,并且它也支持嵌套、样式,以及触摸处理。在下面的例子里,嵌套的标题和正文文字会继承来自
styles.baseText
的fontFamily
字体样式,不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开。
属性
adjustsFontSizeToFit bool
指定字体是否随着给定样式的限制而自动缩放。
allowFontScaling bool
控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。
ios minimumFontScale bool
当adjustsFontSizeToFit开启时,指定最小的缩放比(即不能低于这个值)。可设定的值为0.01 - 1.0
numberOfLines number
用来当文本过长的时候裁剪文本。包括折叠产生的换行在内,总的行数不会超过这个属性的限制。
testID string
用来在端到端测试中标记这个视图。
ios suppressHighlighting bool
当为true时,如果文本被按下,则没有任何视觉效果。默认情况下,文本被按下时会有一个灰色的、椭圆形的高光。
style
color color
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值。
lineHeight number
textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持,在Android上会变为left
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
textShadowColor color
textShadowOffset {width: number, height: number}
textShadowRadius number
android includeFontPadding bool
Android在默认情况下会为文字额外保留一些padding,以便留出空间摆放上标或是下标的文字。对于某些字体来说,这些额外的padding可能会导致文字难以垂直居中。如果你把
textAlignVertical
设置为center
之后,文字看起来依然不在正中间,那么可以尝试将本属性设置为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
本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级,大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。(译注:此组件与TouchableHighlight的区别在于并没有额外的颜色变化,更适于一般场景)
例子:
renderButton: function() {
return (
);
},
属性
activeOpacity number
指定封装的视图在被触摸操作激活时以多少不透明度显示(通常在0到1之间)