html - 如何在 React Native 中对齐极左和极右的元素？

Question

在 native react 中我不能使用像 float:left 或 float:right 这样的东西所以我想将元素极左和极右对齐我该怎么做？我在父 View 上使用了绝对位置，但在 View 内部 flexdirection 和 justify 之间的内容空间不起作用，为什么这样呢？ 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',
            }}>
            &#8377; {newRate}
          </Text>
          <Text
            style={{
              fontSize: 16,
              fontWeight: '700',
              textAlign: 'right',
              color: 'white',
              textDecorationLine: 'line-through',
              textDecorationStyle: 'solid',
            }}>
            &#x20b9; {oldRate}
          </Text>
        </View>
      </View>

CSS:

 cardContent: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

对于 cardContent，我无法删除 position absolute 和 bottom 0 属性，因为我想将卡片固定在屏幕底部。

在下面的屏幕截图中，您可以看到酒店名称出现在最左边，但即使在使用 flexDirection: 'row' 和 justify content: space 之后，newRate 和 oldRate 也不会出现在最右边之间

截图:

Answer 1

你可以试试这个

cardContent: {
    position: 'absolute',
    bottom: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor:'red',
    width:'100%' // add width 
  },