本节介绍：
样式
高度与宽度
使用Flexbox布局
样式
在ReactNative中仍然使用JavaScript来写样式，所有组件都接受名为style的属性。这些样式名基本上是遵循了Web上的CSS命名，只是按照JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。
style属性可以是一个普通的JavaScript对象。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。
使用StyleSheet.create来几种定义组件的样式
class LotsOfStyles extends Component {
render() {
return(
<View style={styles.container}>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigBlue}>just bigBlue</Text>
<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 50,
alignItems: "center",
},
bigBlue: {
color: "blue",
fontWeight: "bold",
fontSize: 40,
},
red: {
color: "red"
},
});
module.exports = LotsOfStyles;
运行结果：
高度与宽度
- 指定宽高
最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。
class LotsOfStyles extends Component {
render() {
return(
<View>
<View style={{width: 50, height: 50, backgroundColor: "powderblue"}}></View>
<View style={{width: 100, height: 100, backgroundColor: "skyblue"}}></View>
<View style={{width: 150, height: 150, backgroundColor: "steelblue"}}></View>
</View>
);
}
}
- 弹性（Flex）宽高
在组件样式中使用flex可以使其在可利用的空间中动态的扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比，也就是权重）。
组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
class LotsOfStyles extends Component {
render() {
return(
// 父容器设定很重要，如果父容器没有设定width和height，也没有设定flex，则父容器的尺寸为0
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: "powderblue"}}></View>
<View style={{flex: 2, backgroundColor: "skyblue"}}></View>
<View style={{flex: 3, backgroundColor: "steelblue"}}></View>
</View>
);
}
}
运行结果：
使用Flexbox布局
在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。
React Native中的Flexbox的工作原理和web上的CSS基本一致，也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。
- Flex Direction
在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。
class LotsOfStyles extends Component {
render() {
return(
// 父容器设定很重要，如果父容器没有设定width和height，也没有设定flex，则父容器的尺寸为0
<View style={{flex: 1, flexDirection: "row"}}>
<View style={{flex: 1, backgroundColor: "powderblue"}}></View>
<View style={{flex: 2, backgroundColor: "skyblue"}}></View>
<View style={{flex: 3, backgroundColor: "steelblue"}}></View>
</View>
);
}
}
运行结果：
- Align Items
在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
class LotsOfStyles extends Component {
render() {
return(
<View style={{flex: 1, flexDirection: "column", justifyContent: "center", alignItems: "center"}}>
<View style={{width: 100, height: 100, backgroundColor: "powderblue"}}></View>
<View style={{width: 100, height: 100, backgroundColor: "skyblue"}}></View>
<View style={{width: 100, height: 100, backgroundColor: "steelblue"}}></View>
</View>
);
}
}
运行结果：
注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 100去掉之后，alignItems: 'stretch'才能生效。
class LotsOfStyles extends Component {
render() {
return(
<View style={{flex: 1, flexDirection: "column", justifyContent: "stretch", alignItems: "center"}}>
<View style={{height: 100, backgroundColor: "powderblue"}}></View>
<View style={{height: 100, backgroundColor: "skyblue"}}></View>
<View style={{height: 100, backgroundColor: "steelblue"}}></View>
</View>
);
}
}
运行结果：
