0

我看过其他关于嵌套平面列表问题的帖子，但我找不到适合我情况的帖子。

我在垂直平面列表中有一个垂直的 flastlist，并且嵌套的平面列表中的元素溢出并且滚动是不可能的。

它看起来像这样：

嵌套的 FlashList 问题

基本思想是，这是在群消息聊天中，并且已经发布了一个事件，并且有一个单独的平面列表，您可以在其中查看谁已经注册。如您所见，元素是绿色的，但平面列表是蓝色的——最后一个元素超出了它。

这是事件窗格的代码：

    return (
      <View>
        <SpotsLeftView />
        <View style={{ flexDirection: "row", justifyContent: "center" }}>
          <AttendeesFlatlist />
          <EventInfo />
        </View>
      </View>
    );

const SpotsLeftView = () => {
    return (
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
          height: 20,
        }}
      >
        <Text
          style={{
            color: "green",
            fontSize: 19,
            fontWeight: "800",
          }}
        >
          9
        </Text>
        <Text
          style={{
            color: "white",
            fontSize: 17,
            marginLeft: 5,
            fontWeight: "500",
          }}
        >
          Spots Left!
        </Text>
      </View>
    );
  };

  const EventInfo = () => {
    return (
      <View
        style={{
          alignSelf: "center",
          alignItems: "center",
          justifyContent: "space-between",
          paddingVertical: "7%",
          width: 0.65 * width,
          backgroundColor: "#2d3238",
          borderRadius: 20,
          paddingHorizontal: "3.5%",
        }}
      >
        <View>
          <Text
            style={{
              fontSize: 26,
              color: "white",
              fontFamily: "Lato_900Black",
              textAlign: "center",
            }}
          >
            {title}
          </Text>
          <Text
            style={{
              fontSize: 22,
              color: "white",
              fontFamily: "Lato_900Black",
              textAlign: "center",
            }}
          >
            {time}
          </Text>
        </View>
        <Text
          style={{
            fontSize: 18,
            color: "white",
            fontWeight: "500",
            marginTop: "15%",
          }}
        >
          {description}
        </Text>
      </View>
    );
  };

  const AttendeesFlatlist = () => {
    return (
      <FlatList
        style={{
          backgroundColor: "blue",
          alignSelf: "center",
          height: 150,
        }}
        data={members}
        renderItem={({ item }) => (
          <ChosenName user={item} onPress={() => null}></ChosenName>
        )}
      />
    );
  };

非常感谢我在使平面列表正常运行方面获得的任何帮助！

4

0 回答 0