[React Native 入门]

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.baseTextfontFamily字体样式,不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开。

属性

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之间)

你可能感兴趣的:([React Native 入门])