如何在react原生中对齐最左和最右的项目？
如何在react原生中对齐最左和最右的项目？
提问于 2019-10-04 13:52:06
在react原生中，我不能使用像float:left或float:right这样的东西，所以我想要将项最左和最右对齐，我该怎么做呢？我在父视图上使用了绝对位置，但是在该视图中，灵活方向和对齐内容空间之间是不工作的，为什么呢？flexbox和绝对定位不能协同工作吗？
代码：
<View style={styles.cardContent}>
<View style={{maxWidth: 175}}>
<Text
style={{
fontSize: 16,
fontWeight: '700',
padding: 10,
color: 'white',
}}>
{hotelName}
</Text>
</View>
<View style={{flexDirection: 'column', marginLeft: 75}}>
<Text
style={{
fontSize: 20,
fontWeight: '700',
padding: 5,
textAlign: 'right',
color: 'white',
}}>
₹ {newRate}
</Text>
<Text
style={{
fontSize: 16,
fontWeight: '700',
textAlign: 'right',
color: 'white',
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
}}>
₹ {oldRate}
</Text>
</View>
</View>CSS：
cardContent: {
position: 'absolute',
bottom: 0,
flexDirection: 'row',
justifyContent: 'space-between',
},对于cardContent，我不能删除位置绝对和底部0属性，因为我想修复屏幕底部的卡。
在下面屏幕截图中，您可以看到酒店名称显示在最左侧，但即使在使用flexDirection: 'row'和justify content: space between之后，newRate和oldRate也不会显示在最右侧
截图：
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-10-04 14:03:20
你可以试试这个
cardContent: {
position: 'absolute',
bottom: 0,
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor:'red',
width:'100%' // add width
},Stack Overflow用户
发布于 2019-10-04 14:12:38
向cardContent组件样式添加width: '100%'。
Stack Overflow用户
发布于 2019-10-04 20:06:50
我只会将width: Dimensions.get('window').width而不是width: 100%添加到cardContent样式中。
因为100%意味着您希望该元素适合其父元素宽度的100%，而Dimensions.get('window').width意味着您希望获得视区(设备)的宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58230639
复制相关文章
相似问题
腾讯云开发者
