React Native：样式

React Native 并没有使用 CSS ，而是依赖于JavaScript 编写的脚本来美化您的程序。这曾经是一个很有争议的决定，您可以通过读这篇文章的内容了解使用这种方式的理由。

声明样式

React Native 是使用下面的代码形式来声明样式：

var styles = StyleSheet.create({
  base: {
    width: 38,
    height: 38,
  },
  background: {
    backgroundColor: '#222222',
  },
  active: {
    borderWidth: 2,
    borderColor: '#00ff00',
  },
});

StyleSheet.Create 构造器是可选的，但使用他可以有一些很好的优势。 他可以确保那些变量值传递内部引用的表格内，变成普通的数字时，该值不会变化，同时也是不透明的。把该构造器放在文件的尾部，您也可以确保该样式只会在应用程序里被加载一次，而不会在每个润色器中都被加载。

所以的属性名字和值都是那些可用有web页面的元素的子集。 而页面布局，  React Native 采用的是 Flexbox.

使用样式

所有的核心组件都接受样式属性：

<Text style={styles.base} /> 
<View style={styles.background} />

他们也同样接受样式属性数组：

={[styles.base, styles.background]} />

这里的行为就和 Object.assign 是一样的：为了避免赋值冲突，同样的元素值位于最右的那一个将会有优先权，并且所有错误的值，包括写错的，未定义的以及空值都会被忽略。常用的样式范式是一个带条件判断的，会依据不同的条件展示不同的样式。

={[styles.base, this.state.active && styles.active]} />

最后，如果你在逼不得已的情况下，也可以直接在润色器里面直接创建样式对象。但这方式我强烈不推荐。把所有的样式代码都放在定义好的数组中。

<View style={[styles.base, { width: this.state.width, height: this.state.width * this.state.aspectRatio }]} />

传递样式

为了让调用点可以定制子模块的样式，您可以把样式表传递过去。使用 View.propTypes.style 和 Text.propTypes.style 目的是为了只让样式参数被传递：

var List = React.createClass({
  propTypes: {
    style: View.propTypes.style,
    elementStyle: View.propTypes.style,
  },
  render: function() {
    return ({elements.map((element) =>
          
        )});
  }
});
// ... in another file ...

支持的性能

您可以在下面的列接里找到更多支持的CSS 的特性：

• View Properties
• Image Properties
• Text Properties
• Flex Properties
• Transform Properties

不深思则不能造于道。不深思而得者，其得易失。

名人名言- 曾国藩

• By 优联实达
• 2015-10-27
• 1871
• 公司新闻，网站开发，网站设计，UI