React Native 样式表

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的定义放在不同的文件中：

Paste_Image.png Paste_Image.png

Position

React Native通过flexbox和margin和padding来定义view的position。

Flex中分为容器和item，容器中有主轴和cross轴

Paste_Image.png

容器上的属性：

• 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 
}