React Native容器样式调整：如何实现目标标签样式？

修改后的代码： #

<View style={{ padding: 16 }}>
  {usersInfo.map((item) => (
    <View 
      key={item.id} 
      style={{ 
        flexDirection: 'row', 
        flexWrap: 'wrap', 
        gap: 10, // 标签间的间距
        marginBottom: 16 // 不同用户标签组的间距
      }}
    >
      {Object.entries(item.intrest).map(([interestName, interestValue]) => {
        // 用对象映射背景色，替代嵌套三元，更易维护
        const colorMap = {
          'Games Online': '#6B7AED',
          'Music': '#EE544A',
          'Concert': '#FF8D5D',
          'Movie': '#29D697'
        };
        const bgColor = colorMap[interestValue] || '#6B7AED';
        return (
          <View 
            key={interestName} 
            style={{ 
              backgroundColor: bgColor, 
              borderRadius: 18,
            }}
          >
            <Text style={{ 
              color: '#FFF', 
              fontSize: 14, 
              fontWeight: '500', 
              paddingHorizontal: 15,
              paddingVertical: 7 
            }}>
              {interestValue}
            </Text>
          </View>
        );
      })}
    </View>
  ))}
</View>

关键修改点： #

• 给每个用户的标签容器添加flexDirection: 'row'和flexWrap: 'wrap'，实现标签横向排列，超出宽度自动换行，匹配目标样式的流式布局
• 用gap:10控制标签之间的水平/垂直间距，marginBottom:16分隔不同用户的标签组，让布局更宽松美观
• 将背景色的嵌套三元表达式改为对象映射，逻辑更清晰，后续新增兴趣类型时只需在colorMap中添加对应键值对即可
• 最外层容器添加padding:16，让内容与页面边缘保持合适距离，还原目标样式的整体观感

内容的提问来源于stack exchange，提问作者MST intern 2