时间戳

首页 > 解决方案 > 映射到元素数组时的 RN 奇怪的样式行为

react-native - 映射到元素数组时的 RN 奇怪的样式行为

问题描述

任何人都知道为什么我的文字出现在屏幕外？我想在一行中有 7 个条目，然后在下一行有 7 个。无论如何，该数组将始终有 28 个条目。我的预期行为是文本跨越屏幕的宽度我必须到容器然后转到下一行

<View
    style={{
     flexDirection: 'row',
     marginTop: 20,
     width: screenWidth - 60,
    }}
>
 {lastMonthDays.map((day, index) => (
   <Text key={`Day-${index}`}>
     {day}
   </Text>
  ))}
</View>

标签： react-native

解决方案

flexWrap: "wrap"您可以通过添加到您的父样式轻松实现您的要求。由于您希望连续有 7 个条目，请确保分配宽度Text如下，

<View
  style={{
    flexDirection: "row",
    marginTop: 20,
    width: screenWidth,
    justifyContent: "space-around",
    flexWrap: "wrap",
  }}
>
  {lastMonthDays.map((day, index) => (
    <Text
      style={{
        width: screenWidth / 7,
        textAlign: "center",
      }}
      key={`Day-${index}`}
    >
      {day}
    </Text>
  ))}
</View>

希望这对您有所帮助。随意怀疑。

推荐阅读