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 (
    <TouchableOpacity activeOpacity={0.5}
    onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('image!myButton')}
      />
    </TouchableOpacity>
  );
},

属性

activeOpacity number

指定封装的视图在被触摸操作激活时以多少不透明度显示（通常在0到1之间）