在一行中的项目之间放置空间答案

【问题标题】：put space between items in a row在一行中的项目之间放置空间
【发布时间】：2020-10-06 13:24:34
【问题描述】：

有什么方法可以设置元素的样式（来自ratings 视图），使它们之间自动有一些空间？我想过打印文本（空白），但这听起来不是一个理想的解决方案。我还能做什么？

 <View style={styles.introContainer}>
          <Text style={styles.name}>{firstName}</Text>
          <View style={styles.ratings}>
            <Icon name="user" size={moderateScale(20)} />
            <Icon name="star" size={moderateScale(13)} />
            <Text style={styles.rating}> {rating}</Text>
          </View>
        </View>

  ratings: {
    flexDirection: 'row',
    //alignContent: 'center',
    alignItems: 'baseline',
  },
  introContainer: {
    alignItems: 'center',
    paddingTop: 50,
    width: '100%',
  },

【问题讨论】：

标签： javascript css reactjs typescript react-native

【解决方案1】：

将margin 或padding 添加到您想要为其提供更多空间的任何元素

或者您可以将width 应用于一些元素并使用

display: flex;
justify-content: space-between;

所以它们间隔相等

【讨论】：

您是否建议我应该将宽度应用于ratings 视图或分别应用于每个图标？将其应用于评分，然后添加显示，justify-content 不起作用
真的吗？很奇怪，它没有用。你设置了足够大的宽度吗？如果你将宽度应用到styles.ratings，比如 300px，会发生什么？

【解决方案2】：

如果您指的是View 组件的子组件，您可以尝试使用：

.ratings > * {
 // your css here
}

通过使用>，您的目标是parent 选择器的直接子代（在本例中为.ratings 类选择器。

* 表示任何类型的子元素，但如果可以的话，您应该更具体一些（所有子元素都应该被同一个类定位或者是同一个 html 元素） css child combinator

【讨论】：

React Native 中默认不能使用 css 选择器
很好，我错过了react-native 标签

【解决方案3】：

更新

抱歉，React Native 中默认不支持 grid，所以选项 3 被丢弃，除非你想使用像 https://www.npmjs.com/package/react-native-responsive-grid 这样的第三方库

选项 1：

给星形图标一个左右边距

选项 2：

将width 和display: flex 添加到ratings 样式并将justifyContent 设置为space-between 或space-around

选项 3：

使用 grid 代替 flex 并设置 grid-gap

【讨论】：

我尝试了选项 2，但没有任何改变。我应该使用什么宽度？我试过 100。对于选项 3，你能举一个如何使用网格的例子吗？我没有使用 flex，所以我不是要替换的东西
我更新了答案，你还需要将display: flex添加到ratings视图中，至于网格，我发现RN现在不支持它，抱歉混乱