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

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:&nbsp;flex; justify-content:&nbsp;space-between;所以它们间隔相等

Answer 3

如果您指的是View组件的孩子，您可以尝试使用：.ratings&nbsp;>&nbsp;*&nbsp;{ &nbsp;//&nbsp;your&nbsp;css&nbsp;here}通过使用>，您可以定位parent选择器的直接子代（在本例中为.ratings类选择器。*表示任何类型的子元素，但如果可以的话，您应该更具体（所有子元素都应该被同一个类定位或是同一个 html 元素）&nbsp;css 子组合器