ReactNative style

所有的核心组件都可以接受style属性。

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

还可以接受数组形式的多个style。

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

如下面的代码，当this.state.active为false时，styles.active就会被忽略掉

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

如果你坚持的话，你也可以在render方法中创建样式对象，但最好不要这样做（每次渲染都会被重复创建）。如果有多个样式，记得把这样动态创建的样式对象放到数组的最后。

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

将样式作为参数传递

为了能够在调用组件的地方对其子组件样式进行自定义，你还可以将样式作为参数进行传递。可以使用View.propTypes.style和Text.propTypes.style来确保传递的参数确实是style类型的。(propTypes是对props的类型检查和限制，参考文档点这里)

var List = React.createClass({
propTypes: {
style: View.propTypes.style,
elementStyle: View.propTypes.style,
},
render: function() {
return (
<View style={this.props.style}>
{elements.map((element) =>
<View style={[styles.element, this.props.elementStyle]} />
)}
</View>
);
}
});

// ... 在别的文件中引用List组件 ...
<List style={styles.list} elementStyle={styles.listElement} />

支持的属性

下面这些链接中查看最新支持的CSS属性。

View的属性

Image的属性

Text的属性

Flex的属性

Transform的属性