React Native 样式表指南

你的名字 2022-03-06 02:20 299阅读 0赞

React Native 的样式基本上是实现了 CSS 的一个子集，针对 iOS、Android 阉割了一些功能，并且部分属性名不完全一致，下面是 React Native 所有的 CSS 样式。

> 下为`0.58`的正式版本

### Text样式属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/color/color.htm" rel="nofollow">color</a> 属性</td> 
  </tr> 
  <tr> 
   <td>fontFamily</td> 
   <td>string</td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/font/font-family.htm" rel="nofollow">font-family</a> 属性</td> 
  </tr> 
  <tr> 
   <td>fontSize</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/font/font-size.htm" rel="nofollow">font-size</a> 属性</td> 
  </tr> 
  <tr> 
   <td>fontStyle</td> 
   <td><code>normal</code>, <code>italic</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/font/font-style.htm" rel="nofollow">font-style</a> 属性，但阉割了 <code>oblique</code> 取值</td> 
  </tr> 
  <tr> 
   <td>fontWeight</td> 
   <td><code>normal</code>, <code>bold</code> <code>100~900</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/font/font-weight.htm" rel="nofollow">font-weight</a> 属性，但阉割了 <code>bolder, lighter</code> 取值</td> 
  </tr> 
  <tr> 
   <td>lineHeight</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text/line-height.htm" rel="nofollow">line-height</a> 属性</td> 
  </tr> 
  <tr> 
   <td>textAlign</td> 
   <td><code>auto</code>, <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code><sup><code>iOS</code></sup></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text/text-align.htm" rel="nofollow">text-align</a> 属性，但增加了 <code>auto</code> 取值。当取值为 <code>justify</code> 时，在 <code>Android</code> 上会变为 <code>left</code></td> 
  </tr> 
  <tr> 
   <td>textDecorationLine</td> 
   <td><code>none</code>, <code>underline</code>, <code>line-through</code>, <code>underline line-through</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text-decoration/text-decoration-line.htm" rel="nofollow">text-decoration-line</a> 属性，但阉割了 <code>overline</code>, <code>blink</code> 取值</td> 
  </tr> 
  <tr> 
   <td>textShadowColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text-decoration/text-shadow.htm" rel="nofollow">text-shadow</a> 属性中的颜色定义</td> 
  </tr> 
  <tr> 
   <td>textShadowOffset</td> 
   <td>{ <br>width:<a rel="nofollow">&lt;number&gt;</a>,<br>height:<a rel="nofollow">&lt;number&gt;</a><br>}</td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text-decoration/text-shadow.htm" rel="nofollow">text-shadow</a> 属性中的阴影偏移定义</td> 
  </tr> 
  <tr> 
   <td>textShadowRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>在 <code>CSS</code> 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义</td> 
  </tr> 
  <tr> 
   <td>includeFontPadding<br><sup><code>Android</code></sup></td> 
   <td><a rel="nofollow">&lt;bool&gt;</a></td> 
   <td>Android 在默认情况下会为文字额外保留一些 padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的 padding 可能会导致文字难以垂直居中。如果你把 <code>textAlignVertical</code> 设置为 <code>center</code> 之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为 <code>false</code></td> 
  </tr> 
  <tr> 
   <td>textAlignVertical<br><sup><code>Android</code></sup></td> 
   <td><code>auto</code>, <code>top</code>, <code>bottom</code>, <code>center</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text/vertical-align.htm" rel="nofollow">vertical-align</a> 属性，增加了 <code>auto</code> 取值，<code>center</code> 取代了 <code>middle</code>，并阉割了 <code>baseline, sub</code> 等值</td> 
  </tr> 
  <tr> 
   <td>fontVariant<br><sup><code>iOS</code></sup></td> 
   <td><code>small-caps</code>, <code>oldstyle-nums</code>, <code>lining-nums</code>, <code>tabular-nums</code>, <code>proportional-nums</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/font/font-variant.htm" rel="nofollow">font-variant</a> 属性，但取值更丰富</td> 
  </tr> 
  <tr> 
   <td>letterSpacing<br><sup><code>iOS</code></sup></td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text/letter-spacing.htm" rel="nofollow">letter-spacing</a> 属性</td> 
  </tr> 
  <tr> 
   <td>textDecorationColor<br><sup><code>iOS</code></sup></td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text-decoration/text-decoration-color.htm" rel="nofollow">text-decoration-color</a> 属性</td> 
  </tr> 
  <tr> 
   <td>textDecorationStyle<br><sup><code>iOS</code></sup></td> 
   <td><code>solid</code>, <code>double</code>, <code>dotted</code>, <code>dashed</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/text-decoration/text-decoration-style.htm" rel="nofollow">text-decoration-style</a> 属性，但阉割了 <code>wavy</code> 取值</td> 
  </tr> 
  <tr> 
   <td>textTransform</td> 
   <td><code>none</code>，<code>uppercase</code>，<code>lowercase</code>，<code>capitalize</code></td> 
   <td>对应 CSS <a href="http://css.doyoe.com/properties/text/text-transform.htm" rel="nofollow">text-transform</a> 属性，不支持 CSS3中 <code>full-width</code> 的取值</td> 
  </tr> 
  <tr> 
   <td>writingDirection<br><sup><code>iOS</code></sup></td> 
   <td><code>auto</code>, <code>ltr</code>, <code>rtl</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/writing-modes/direction.htm" rel="nofollow">direction</a> 属性，增加了 <code>auto</code> 取值</td> 
  </tr> 
 </tbody> 
</table>

### Dimension 尺寸 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/dimension/width.htm" rel="nofollow">width</a> 属性</td> 
  </tr> 
  <tr> 
   <td>minWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/dimension/min-width.htm" rel="nofollow">min-width</a> 属性</td> 
  </tr> 
  <tr> 
   <td>maxWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/dimension/max-width.htm" rel="nofollow">max-width</a> 属性</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/dimension/height.htm" rel="nofollow">height</a> 属性</td> 
  </tr> 
  <tr> 
   <td>minHeight</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/dimension/min-height.htm" rel="nofollow">min-height</a> 属性</td> 
  </tr> 
  <tr> 
   <td>maxHeight</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/dimension/max-height.htm" rel="nofollow">max-height</a> 属性</td> 
  </tr> 
 </tbody> 
</table>

### Position 定位 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>position</td> 
   <td><code>absolute</code>, <code>relative</code></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/positioning/position.htm" rel="nofollow">position</a> 属性，但阉割了 <code>static, fixed</code> 取值</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/positioning/top.htm" rel="nofollow">top</a> 属性</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/positioning/right.htm" rel="nofollow">right</a> 属性</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/positioning/bottom.htm" rel="nofollow">bottom</a> 属性</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/positioning/left.htm" rel="nofollow">left</a> 属性</td> 
  </tr> 
  <tr> 
   <td>zIndex</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/positioning/z-index.htm" rel="nofollow">z-index</a> 属性</td> 
  </tr> 
 </tbody> 
</table>

### Margin 外部白 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/margin/margin.htm" rel="nofollow">margin</a> 属性，不同的是，它只能定义一个参数，如需分别定义<code>上、右、下、左</code>4个方位的外补白，可以通过下面的单向外部白属性</td> 
  </tr> 
  <tr> 
   <td>marginHorizontal</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>无对应的 <code>CSS</code> 属性。其效果相当于同时设置 <code>marginRight</code> 和 <code>marginLeft</code></td> 
  </tr> 
  <tr> 
   <td>marginVertical</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>无对应的 <code>CSS</code> 属性。其效果相当于同时设置 <code>marginTop</code> 和 <code>marginBottom</code></td> 
  </tr> 
  <tr> 
   <td>marginTop</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/margin/margin-top.htm" rel="nofollow">margin-top</a> 属性</td> 
  </tr> 
  <tr> 
   <td>marginRight</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/margin/margin-right.htm" rel="nofollow">margin-right</a> 属性</td> 
  </tr> 
  <tr> 
   <td>marginBottom</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/margin/margin-bottom.htm" rel="nofollow">margin-bottom</a> 属性</td> 
  </tr> 
  <tr> 
   <td>marginLeft</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/margin/margin-left.htm" rel="nofollow">margin-left</a> 属性</td> 
  </tr> 
 </tbody> 
</table>

### Padding 内部白 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/padding/padding.htm" rel="nofollow">padding</a> 属性，不同的是，它只能定义一个参数，如需分别定义<code>上、右、下、左</code>4个方位的内补白，可以通过下面的单向内部白属性</td> 
  </tr> 
  <tr> 
   <td>paddingHorizontal</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>无对应的 <code>CSS</code> 属性。其效果相当于同时设置 <code>paddingRight</code> 和 <code>paddingLeft</code></td> 
  </tr> 
  <tr> 
   <td>paddingVertical</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>无对应的 <code>CSS</code> 属性。其效果相当于同时设置 <code>paddingTop</code> 和 <code>paddingBottom</code></td> 
  </tr> 
  <tr> 
   <td>paddingTop</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/padding/padding-top.htm" rel="nofollow">padding-top</a> 属性</td> 
  </tr> 
  <tr> 
   <td>paddingRight</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/padding/padding-right.htm" rel="nofollow">padding-right</a> 属性</td> 
  </tr> 
  <tr> 
   <td>paddingBottom</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/padding/padding-bottom.htm" rel="nofollow">padding-bottom</a> 属性</td> 
  </tr> 
  <tr> 
   <td>paddingLeft</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/padding/padding-left.htm" rel="nofollow">padding-left</a> 属性</td> 
  </tr> 
 </tbody> 
</table>

### Border 边框 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>borderStyle</td> 
   <td><code>solid</code>, <code>dotted</code>, <code>dashed</code></td> 
   <td>对应 <code>CSS</code> <code>border-style</code> 属性，但阉割了 <code>none, hidden, double, groove, ridge, inset, outset</code> 取值，且无方向分拆属性</td> 
  </tr> 
  <tr> 
   <td>borderWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-width</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderTopWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-top-width</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderRightWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-right-width</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderBottomWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-bottom-width</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderLeftWidth</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-left-width</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-color</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderTopColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-top-color</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderRightColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-right-color</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderBottomColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-bottom-color</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderLeftColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-left-color</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-radius</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderTopLeftRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-top-left-radius</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderTopRightRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-top-right-radius</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderBottomLeftRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-bottom-left-radius</code> 属性</td> 
  </tr> 
  <tr> 
   <td>borderBottomRightRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>border-bottom-right-radius</code> 属性</td> 
  </tr> 
  <tr> 
   <td>shadowColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/border/box-shadow.htm" rel="nofollow">box-shadow</a> 属性中的颜色定义</td> 
  </tr> 
  <tr> 
   <td>shadowOffset</td> 
   <td>{ <br>width: <a rel="nofollow">&lt;number&gt;</a>, <br>height: <a rel="nofollow">&lt;number&gt;</a><br>}</td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/border/box-shadow.htm" rel="nofollow">box-shadow</a> 属性中的阴影偏移定义</td> 
  </tr> 
  <tr> 
   <td>shadowRadius</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>在 <code>CSS</code> 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义</td> 
  </tr> 
  <tr> 
   <td>shadowOpacity</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <a href="http://css.doyoe.com/properties/border/box-shadow.htm" rel="nofollow">box-shadow</a> 属性中的阴影透明度定义</td> 
  </tr> 
 </tbody> 
</table>

### Background 背景 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>backgroundColor</td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>background-color</code> 属性</td> 
  </tr> 
 </tbody> 
</table>

### Transform 转换 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transform</td> 
   <td><code>[{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]</code></td> 
   <td>对应 <code>CSS</code> <code>transform</code> 属性</td> 
  </tr> 
  <tr> 
   <td>transformMatrix</td> 
   <td><code>TransformMatrixPropType</code></td> 
   <td>类似于 <code>CSS</code> 中 <code>transform</code> 属性的 <code>matrix()</code> 和 <code>matrix3d()</code> 函数</td> 
  </tr> 
  <tr> 
   <td>backfaceVisibility</td> 
   <td><code>visible</code>, <code>hidden</code></td> 
   <td>对应 <code>CSS</code> <code>backface-visibility</code> 属性</td> 
  </tr> 
 </tbody> 
</table>

### Flexbox 弹性盒 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>flex</code> 属性，但只能为整数值</td> 
  </tr> 
  <tr> 
   <td>flexGrow</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>flex-grow</code> 属性</td> 
  </tr> 
  <tr> 
   <td>flexShrink</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>flex-shrink</code> 属性</td> 
  </tr> 
  <tr> 
   <td>flexBasis</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>flex-basis</code> 属性</td> 
  </tr> 
  <tr> 
   <td>flexDirection</td> 
   <td><code>row</code>, <code>row-reverse</code>, <code>column</code>, <code>column-reverse</code></td> 
   <td>对应 <code>CSS</code> <code>flex-direction</code> 属性</td> 
  </tr> 
  <tr> 
   <td>flexWrap</td> 
   <td><code>wrap</code>, <code>nowrap</code></td> 
   <td>对应 <code>CSS</code> <code>flex-wrap</code> 属性，但阉割了 <code>wrap-reverse</code> 取值</td> 
  </tr> 
  <tr> 
   <td>justifyContent</td> 
   <td><code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>space-between</code>, <code>space-around</code></td> 
   <td>对应 <code>CSS</code> <code>justify-content</code> 属性，但阉割了 <code>stretch</code> 取值。</td> 
  </tr> 
  <tr> 
   <td>alignItems</td> 
   <td><code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>stretch</code></td> 
   <td>对应 <code>CSS</code> <code>align-items</code> 属性，但阉割了 <code>baseline</code> 取值。</td> 
  </tr> 
  <tr> 
   <td>alignSelf</td> 
   <td><code>auto</code>, <code>flex-start</code>, <code>flex-end</code>, <code>center</code>, <code>stretch</code></td> 
   <td>对应 <code>CSS</code> <code>align-self</code> 属性，但阉割了 <code>baseline</code> 取值</td> 
  </tr> 
 </tbody> 
</table>

### Other 其他 ###

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>取值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>opacity</td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td>对应 <code>CSS</code> <code>opacity</code> 属性</td> 
  </tr> 
  <tr> 
   <td>overflow</td> 
   <td><code>visible</code>, <code>hidden</code>, <code>scroll</code></td> 
   <td>对应 <code>CSS</code> <code>overflow</code> 属性，但阉割了 <code>auto</code> 取值</td> 
  </tr> 
  <tr> 
   <td>elevation<br><sup><code>Android</code></sup></td> 
   <td><a rel="nofollow">&lt;number&gt;</a></td> 
   <td><code>CSS</code> 中没有对应的属性，只在 <code>Android5.0+</code> 上有效</td> 
  </tr> 
  <tr> 
   <td>resizeMode</td> 
   <td><code>cover</code>, <code>contain</code>, <code>stretch</code></td> 
   <td><code>CSS</code> 中没有对应的属性，可以参考 <code>background-size</code> 属性</td> 
  </tr> 
  <tr> 
   <td>overlayColor<br><sup><code>Android</code></sup></td> 
   <td>string</td> 
   <td><code>CSS</code> 中没有对应的属性，当图像有圆角时，将角落都充满一种颜色</td> 
  </tr> 
  <tr> 
   <td>tintColor<br><sup><code>iOS</code></sup></td> 
   <td><a rel="nofollow">&lt;color&gt;</a></td> 
   <td><code>CSS</code> 中没有对应的属性，<code>iOS</code> 图像上特殊的色彩，改变不透明像素的颜色</td> 
  </tr> 
 </tbody> 
</table>

### Color 颜色 ###

`React Native` 支持了 `CSS` 中大部分的颜色类型：

*  `#f00` (\#rgb)
 *  `#f00c` (\#rgba)：`CSS` 中无对应的值
 *  `#ff0000` (\#rrggbb)
 *  `#ff0000cc` (\#rrggbbaa)：`CSS` 中无对应的值
 *  `rgb(255, 0, 0)`
 *  `rgba(255, 0, 0, 0.9)`
 *  `hsl(360, 100%, 100%)`
 *  `hsla(360, 100%, 100%, 0.9)`
 *  `transparent`
 *  `0xff00ff00` (0xrrggbbaa)：`CSS` 中无对应的值
 *  `Color Name`：支持了 [基本颜色关键字][Link 1] 和 [拓展颜色关键字][Link 2]，但不支持 [28 个系统颜色][28]；

### 优先级与继承（Specificity and inheritance） ###

组件的引入样式的优先级高于全局样式的优先级。

### 选择器 ###

1.  基本选择器只支持类选择器
2.  不支持组合选择器的写法
3.  不支持伪类及伪元素

[Link 1]: http://css.doyoe.com/appendix/color-keywords.htm#basic
[Link 2]: http://css.doyoe.com/appendix/color-keywords.htm#extended
[28]: http://css.doyoe.com/appendix/color-keywords.htm#system