题目
Row组件中有两个Text组件,如果使用justifyContent对齐方式,下面哪个属性可以实现相邻元素之间的间距、包括第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样? A. FlexAlign.CenterB. FlexAlign.AroundC. FlexAlign.SpaceEvenlyD. FlexAlign.SpaceBetween
Row组件中有两个Text组件,如果使用justifyContent对齐方式,下面哪个属性可以实现相邻元素之间的间距、包括第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样?
- A. FlexAlign.Center
- B. FlexAlign.Around
- C. FlexAlign.SpaceEvenly
- D. FlexAlign.SpaceBetween
题目解答
答案
C
解析
本题考查React Native中justifyContent
属性的使用,核心在于理解不同对齐方式对子元素间距的影响。关键点在于:
SpaceEvenly
的作用:将所有间隔(包括元素间及两端)均分。- 选项对比:
SpaceBetween
仅均分元素间间距,忽略两端。SpaceAround
使元素间间距为两侧间距的两倍,无法完全均等。Center
仅居中对齐,不保证间距均等。
选项分析
A. FlexAlign.Center
- 效果:将所有子元素居中对齐,剩余空间平均分配到两端。
- 问题:无法保证相邻元素之间的间距与两端间距完全一致。
B. FlexAlign.Around
- 效果:在每个子元素周围分配相等的间距,但元素间的间距为两侧间距的两倍。
- 示例:两个元素时,总剩余空间分为3份,左、右各1份,中间2份。
C. FlexAlign.SpaceEvenly
- 效果:所有间隔(包括元素间及两端)均分。
- 示例:两个元素时,总剩余空间分为3份,左、中、右各1份,间距完全相等。
D. FlexAlign.SpaceBetween
- 效果:仅均分元素间的间距,忽略两端的间距。
- 问题:两端无额外空间分配,无法满足题目要求。