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