React Native中没有使用CSS来进行样式定义,因为CSS的引入全局设置的缺点。
React Native实现了部分CSS,利用JavaScript中的Object来定义样式,增强模块化。
Inline Style
在element的style属性中直接定义
<Text>
The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox
jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>.
</Text>
用object 进行style
将style的定义通过object写在render之外
var italic = {
fontStyle: 'italic'
};
var bold={
fontWeight: 'bold'
};
...
render() {
return ( <Text>
The quick <Text style={italic}>brown</Text> fox
jumped over the lazy <Text style={bold}>dog</Text>.
</Text>
); }
Stylesheet.Create
通过stylesheet.create
也可以创建object类型的style,但是有一些额外的好处,这种style是不可变的,会透明的将他们转换为引用table的index,放在代码最后可以保证只会被初始化一次。
Style Concatenation
可以将多个style同时作用到component上,如果定义有重复,则最右边的优先
var AccentButton = React.createClass({ render: function() {
return (
<Text style={[styles.button, styles.accentText]}>
{this.props.children} </Text>
); }
});
通常style的定义可以和component的定义放在不同的文件中:
Position
React Native通过flexbox和margin和padding来定义view的position。
Flex中分为容器和item,容器中有主轴和cross轴
容器上的属性:
- flexDirection: 主轴的方向,默认为"row"
- justifyContent:item在主轴上的排列,默认为"flex-start"
- align-items:item在cross轴上的对齐,默认为“stretch”
Item上的属性:
- flex: flex-grow,flex-shrink,flex-basis的简写,默认值为
0 1 auto
。后两个属性可选。
也可以通过绝对位置来布局
container: {
position: 'absolute',
top: 30,
left: 0,
right: 0,
bottom: 0
}