样式style没啥好说的,可以用{}扩起来指定样式,也可以用StyleSheet.create来集中定义组件的样式。
给控件指定宽高其实也没啥好说的,可以指定绝对值,比如:
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
也可以指定 弹性(Flex)宽高。
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大(即占据剩余空间的比等于并列组件间flex值的比)。
参考下面的例子:
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'powderblue'}} />
//整体权重是三个子控件flex数字之和,则表示占六分之一
<View style={{flex: 2, backgroundColor: 'skyblue'}} />
//占六分之2
<View style={{flex: 3, backgroundColor: 'steelblue'}} />
//占六分之3.占了屏幕的一半高度
</View>
效果图: