React Native 容器样式

Question

这是我创建的容器看起来：

---

---

这就是我想要的风格

---

---

我该怎么办呢。代码是：

<View>
      {
        usersInfo.map((item) =>
        <View key={item.id} style={{}}>
        {Object.entries(item.intrest).map(([interestName, interestValue]) => (
        <View key={interestName} style={{ backgroundColor: interestValue === 'Games Online' ? '#6B7AED' : interestValue === 'Music' ? '#EE544A' : interestValue === 'Concert' ? '#FF8D5D' : interestValue === 'Movie' ? '#29D697' : '#6B7AED', borderRadius: 18,}}>
        <Text style={{ color: '#FFF', fontSize: 14, fontWeight: '500', paddingHorizontal: 15,paddingVertical: 7 }}>{interestValue}</Text>
        </View>
        ))}
        </View>
        )
        }
</View>

我想像给定的示例一样设置我的容器的样式。

Answer 1

您是否尝试以适当的间距对齐项目：

 `<View>
      {usersInfo.map((item) => (
        <View key={item.id} style={{ marginVertical: 10 }}>
          {Object.entries(item.interests).map(([interestName, interestValue]) => (
            <View
              key={interestName}
              style={{
                backgroundColor:
                  interestValue === 'Games Online'
                    ? '#6B7AED'
                    : interestValue === 'Music'
                    ? '#EE544A'
                    : interestValue === 'Concert'
                    ? '#FF8D5D'
                    : interestValue === 'Movie'
                    ? '#29D697'
                    : '#6B7AED',
                borderRadius: 18,
                marginVertical: 5,
              }}
            >
              <Text
                style={{
                  color: '#FFF',
                  fontSize: 14,
                  fontWeight: '500',
                  paddingHorizontal: 15,
                  paddingVertical: 7,
                }}
              >
                {interestValue}
              </Text>
            </View>
`