Есть ли способ создать размерный и функциональный FlatList внутри модального окна? - PullRequest
Новая
       34

Есть ли способ создать размерный и функциональный FlatList внутри модального окна?

0 голосов
/ 20 июня 2020

Добрый вечер!

Я пытался создать модальное окно с прокручиваемым FlatList внутри, но у такого FlatList должен быть уменьшен размер по высоте. Модальное окно будет искать по широкому списку аэропортов, поэтому в основном может отображаться много данных, поэтому FlatList - лучший инструмент для этого случая. По сути, модальный экран будет выглядеть следующим образом:

Ideal Modal Example

Однако я не могу заставить прокрутку внутри 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>

Если я использую FlatList внутри ScrollView, как показано выше, код работает так, как задумано. Однако я получил это предупреждение:

VirtualizedLists никогда не должны быть вложены внутри простых ScrollView с той же ориентацией - вместо этого используйте другой контейнер с поддержкой VirtualizedList.

Из-за этого, Я не могу правильно использовать FlatList. Кроме того, мне удалось заставить его работать с .map, но мне посоветовали не использовать его, так как я собираюсь загрузить список с большим количеством элементов, и это может вызвать задержку.

Мне удалось реализовать FlatList другим способом, например: 

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

Это, однако, не позволяет пользователю выполнять прокрутку. Список остается stati c, и пользователь вообще не может прокручивать.

Я пробовал использовать {flex: 1, flexGrow: 1} в родительском View и самом FlatList, оба не работают вообще, даже внутри FlatList контейнер или стиль.

Кто-нибудь может мне помочь с этим? Я очень ценю время и усилия! Спасибо!

...