javascript - 有没有办法在 Modal 中制作大小合适且功能强大的 FlatList？

Question

晚上好！

我一直在尝试创建一个内部带有可滚动 FlatList 的模式，但是这样的 FlatList 应该减小它的高度大小。该模式将搜索广泛的机场列表，因此基本上可能会显示很多数据，因此为什么 FlatList 是这种场合的最佳工具。基本上，模态屏幕如下图所示：

但是，无论如何，我都无法使 FlatList 中的滚动工作。这是代码，FlatList 有点功能，但它有一个警告：

  const styles = StyleSheet.create({
    modalContainer: {
      backgroundColor: 'rgba(50,50,50,0.6)',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    modalActivityContainer: {
      backgroundColor: colors.colorWhite,
      borderColor: colors.colorLightBlack,
      borderWidth: 2,
      borderRadius: 20,
      padding: props.padding ? Number(props.padding) : 10,
      maxWidth: '85%',
    },
    modalHeader: {
      flexDirection: 'row',
      justifyContent: 'center',
    },
    headerAirportModal: {
      backgroundColor: colors.colorGrey,
      borderTopRightRadius: 20,
      borderTopLeftRadius: 20,
      paddingHorizontal: 5,
      paddingVertical: 10,
      width: '100%',
      justifyContent: 'center',
    },
    searchAirportBarContainer: {
      backgroundColor: colors.colorWhite,
      height: 40,
    },

...
    <Modal
      onRequestClose={() => props.onRequestClose()}
      animationType="fade"
      transparent
      visible={props.showModal}>
      <TouchableWithoutFeedback
        onPress={() => {
          props.onRequestClose();
        }}>
        <View style={styles.modalContainer}>
          <TouchableWithoutFeedback>
            <View style={styles.modalActivityContainer}>

              <View style={styles.modalHeader}>
          <View style={styles.headerAirportModal}>
            <Item style={styles.searchAirportBarContainer} rounded>
              <Icon
                style={styles.iconSearchAirport}
                type="FontAwesome5"
                name="search"
              />
              <Input
                style={styles.searchAirportBarText}
                placeholderTextColor={colors.colorLightBlack}
                placeholder="Search by Airport, Country or City"
              />
            </Item>
          </View>
        </View>

        <View>
          <View style={styles.modalHeader}>
            <Grid style={styles.headerAirportModalBackground}>
              <Text style={styles.headerAirportModalText}>Latest Searches</Text>

              <TouchableOpacity style={styles.clearButtonLatestContainer}>
                <View>
                  <Text style={styles.clearButtonAirport}>Clear</Text>
                </View>
              </TouchableOpacity>
            </Grid>
          </View>
        </View>

        <View style={{maxHeight: 250}}>
          <ScrollView>
            <View onStartShouldSetResponder={() => true}>
              <FlatList
                data={airportElements}
                renderItem={renderAirportItem}
                keyExtractor={(item) => item.id}
              />
            </View>
          </ScrollView>
        </View>

        <Button
          backgroundColor={colors.colorRed}
          alignSelf="stretch"
          buttonStyle={styles.finishButton}
          onPress={() => {
            setModalSelectAirport(false);
          }}>
          Cancel
        </Button>

            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>

如果我在 ScrollView 中使用 FlatList，如上所示，代码将按预期工作。但是，我收到了这个警告：

VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 改用另一个 VirtualizedList 支持的容器。

因此，我无法正确使用 FlatList。另外，我已经设法使它与 . 一起使用.map，但建议不要使用它，因为我要加载一个包含很多元素的列表，这可能会导致延迟。

我设法以另一种方式实现 FlatList：

        <View
          style={styles.airportLatestSearchListContainer}>
          <FlatList
            contentContainerStyle={styles.airportLatestSearchlist}
            data={airportElements}
            renderItem={renderAirportItem}
            keyExtractor={(item) => item.id}
          />
        </View> 

但是，这会阻止用户滚动。该列表保持静态，用户根本无法滚动。

我曾尝试{flex: 1, flexGrow: 1}在父视图和 FlatList 本身中使用，即使在 FlatList 容器或样式中，两者都不起作用。

有人可以帮我解决这个问题吗？我真的很感激时间和精力！谢谢！

标签： javascriptcssreactjsreact-nativejsx