Container View Default Style Property
在 ReactNative 中, 容器视图类有一个很容易被忽略的隐藏 style 属性, 很隐蔽, 但是非常重要.
在你开始构建页面的顶级父视图(相当于仅设置了flex: 1且能看到宽高的视图), 它有几个常常被忽略的, 且对于整体布局极为重要的默认属性
- `flexDirection: 'column'`
- `justifyContent: 'flex-start'`
- `alignItems: 'stretch'`
这几个属性会导致什么
- 直接放在顶级父视图父视图或者仅设置了
flex: 1的父视图上的视图是没有高度的, 而宽度等于父视图的宽度(所以看不到任何东西)
// 子视图仅设置的颜色
childViewStyle: {
backgroundColor: 'yellowgreen'
}
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKTHIpXj-1576131110204)(./00000001.png)]](https://img-blog.csdnimg.cn/20191212141331287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmZXVuZw==,size_16,color_FFFFFF,t_70)
- 若指定了子视图的高度, 则会从顶部开始排列, 宽度被拉伸到最大.
childViewStyle: {
backgroundColor: 'yellowgreen',
height: 20
}
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dtZzaiwD-1576131110206)(00000002.png)]](https://img-blog.csdnimg.cn/20191212141410508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmZXVuZw==,size_16,color_FFFFFF,t_70)
- 若你同时又指定了子视图的宽度, 则父视图的
alignItems: 'stretch'属性不生效, 默认属性变更为alignItems: 'flex-start'
childViewStyle: {
backgroundColor: 'yellowgreen',
height: 20,
width: 100,
},
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZiPixYZ-1576131110206)(00000003.png)]](https://img-blog.csdnimg.cn/20191212141422936.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmZXVuZw==,size_16,color_FFFFFF,t_70)
