Flatlist - 设置高度和滚动

Question

我需要帮助才能在我的 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>
  );
};

我已经尝试了很多我读过的建议，但是或者 flatlist 以我想要的高度出现但我无法滚动内容，或者 flatlist 呈现所有元素将视图的波纹管内容推到视图之外。

如果代码解释思路：

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

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

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

Answer 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>

Flatlist - 设置高度和滚动

Flatlist - Set height and scroll

scroll

react-native-flatlist