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

Question

有什么方法可以设置元素（从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%',  },

Answer 1

更新

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

选项1：

给星形图标一个左右边距

选项 2：

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

选项 3：

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

Answer 2

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

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

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

所以它们间隔相等

Answer 3

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

.ratings > * {
 // your css here}

通过使用>，您可以定位parent选择器的直接子代（在本例中为.ratings类选择器。

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