如何在本机反应中对齐极左和极右的项目？答案

【问题标题】：How to align items on extreme left and right in react native?如何在本机反应中对齐极左和极右的项目？
【发布时间】：2020-02-02 10:51:07
【问题描述】：

在本机反应中，我不能使用 float:left 或 float:right 这样的东西，所以我想将项目左右对齐，我该怎么做？我在父视图上使用了绝对位置，但在该视图中，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 between 之后，newRate 和 oldRate 也不会出现在最右侧

截图：

【问题讨论】：

加宽100%
我在 css 中看不到 display 属性，只是为了确保 justify-content 正常工作，您可以添加 display: flex;弹性基础：100%；和最小宽度：100%；到 cardContent 类。并检查它是否有效。

标签： html css reactjs react-native

【解决方案1】：

你可以试试这个

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

【讨论】：

justifyContent: 'space-between' 为我做了。谢谢，纳格什。

【解决方案2】：

将width: '100%' 添加到您的cardContent 组件样式中。

【讨论】：

【解决方案3】：

我只想将width: Dimensions.get('window').width 添加到cardContent 样式而不是width: 100%。

因为100% 表示您希望此元素适合其父宽度的 100%，而Dimensions.get('window').width 表示您希望视口（设备）的宽度。

【讨论】：