Flatlist - 设置高度和滚动答案

【问题标题】：Flatlist - Set height and scrollFlatlist - 设置高度和滚动
【发布时间】：2021-01-20 18:04:50
【问题描述】：

我需要帮助才能在我的 React Native 应用中正确设置 Flatlist。

我需要的是：

我有意见
在该视图中，我在顶部和底部有一个标题。
在我想插入一个显示元素列表的平面列表之间，但我想要一个固定的高度和滚动功能来查看列表中的所有元素。

我的部分代码：

return (
    <Container theme={theme}>
      <TitleContainer theme={theme}>
        <Title theme={theme}>Destino da publicação:</Title>
      </TitleContainer>
      <ButtonContainer>
        <Option theme={theme} onPress={() => setView('contacts')}>
          <Texto theme={theme}>Contactos</Texto>
        </Option>
        <Option theme={theme} onPress={() => setView('groups')}>
          <Texto theme={theme}>Grupos</Texto>
        </Option>
      </ButtonContainer>
      <ContactContainer>
        {view === 'contacts' && (
          <FlatList
            key="contactList"
            data={contactListFiltered}
            renderItem={renderItemContact}
            ListEmptyComponent={() => (
              <Text
                style={{
                  color: `${theme.mainColor}`,
                  textAlign: 'center',
                  fontSize: VMHSize(811, 14),
                }}
              >
                Sem contatos
              </Text>
            )}
            keyExtractor={(item) => item.email}
          />
        )}
        {view === 'groups' && (
          <FlatList
            key="groupListShare"
            data={groupListFiltered}
            renderItem={renderItemGroup}
            ListEmptyComponent={() => (
              <Text
                style={{
                  color: `${theme.mainColor}`,
                  textAlign: 'center',
                  fontSize: VMHSize(811, 14),
                }}
              >
                Não existem grupos criados
              </Text>
            )}
            keyExtractor={(item) => item}
          />
        )}
        <ButtonContainer>
          <Option onPress={close} theme={theme}>
            <MaterialCommunityIcons
              name="cancel"
              size={VMHSize(811, 25)}
              color={theme.mainColor}
            />
            <OptionText theme={theme}>Cancelar</OptionText>
          </Option>
        </ButtonContainer>
      </ContactContainer>
    </Container>
  );
};

我已经尝试了许多我阅读的建议，但是或者平面列表以我想要的高度显示但我无法滚动内容，或者平面列表呈现所有元素将视图的波纹管内容推到视图之外。

如果代码解释一下思路：

我正在构建一个社交媒体应用程序，类似于 facebook。我有一个视图 Posts，其中有一个 flatlist，它为用户显示来自 feed 的帖子。

然后，每个帖子都有一个选项按钮，其中有很多选项，一个是与另一个朋友分享帖子。在上面的代码中，我需要在一个固定高度的视图中显示好友列表。如果我有很多朋友，我需要在有限大小的视图中滚动该列表。我正在使用另一个平面列表来列出朋友。

有人可以帮助我吗？谢谢！

【问题讨论】：

标签： scroll react-native-flatlist

【解决方案1】：

好吧，我用 ScrollView 和 nestedScrollEnabled 属性解决了我的问题。

<ScrollView style={{ height: VMHSize(811, 300) }} nestedScrollEnabled>
        {view === 'contacts' && (
          <FlatList
            key="contactList"
            data={contactListFiltered}
            renderItem={renderItemContact}
            ListEmptyComponent={() => (
              <Text
                style={{
                  color: `${theme.mainColor}`,
                  textAlign: 'center',
                  fontSize: VMHSize(811, 14),
                }}
              >
                Sem contatos
              </Text>
            )}
            keyExtractor={(item) => item.email}
          />
        )}
        {view === 'groups' && (
          <FlatList
            key="groupListShare"
            data={groupListFiltered}
            renderItem={renderItemGroup}
            ListEmptyComponent={() => (
              <Text
                style={{
                  color: `${theme.mainColor}`,
                  textAlign: 'center',
                  fontSize: VMHSize(811, 14),
                }}
              >
                Não existem grupos criados
              </Text>
            )}
            keyExtractor={(item, index) => item + index}
          />
        )}
      </ScrollView>

【讨论】：