react-native 不是通过css来实现app的styles,而是依赖于JavaScript。
一、声明一个styles:
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active:
{
borderWidth: 2, borderColor: '#00ff00',
},
});
查看其他属性的名称,可以参考:http://facebook.github.io/react-native/docs/flexbox.html
二、使用styles
1、所有的核心组件都能应用styles
<Text style={styles.base} />
<View style={styles.background} />
2、也可以使用数组来限制一个组件
<View style={[styles.base, styles.background]} />
3、通常情况下,会在某个特定情况下加上styles
<View style={[styles.base, this.state.active && styles.active]} />
不鼓励在render中加入styles。
三、样式传递
为了让一个 call site 定制你的子组件的样式,你可以通过样式传递。使用 View.propTypes.style
和 Text.propTypes.style
,以确保只有样式被传递了。
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>
);
}
});
// ... in another file ...
<List style={styles.list} elementStyle={styles.listElement} />