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} />
原文地址：https://www.jb51.cc/react/303228.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
