Есть ли способ исправить прокрутку компонента FlatList в компоненте ScrollView?

Я пытаюсь прокрутить несколько плоских списков внутри компонента прокрутки. Два плоских списка расположены горизонтально, а последний прокручивается вертикально. Вертикальная прокрутка не работает. Я нашел способ использовать свойство max-Height Flat-List, чтобы заставить его прокручиваться, но по мере уменьшения значения max-Height высота компонента уменьшается, а также отображается компонент в маленьком квадратике. Любое решение этой проблемы?

'''

    <View style={styles.container}>
      <ScrollView style={{ flex: 1, width: "100%" }} nestedScrollEnabled={true}>
        <View style={flatlistContainer}>
          <Text style={releaseText}>New Releases</Text>
          <FlatList
            contentContainerStyle={{
              alignItems: "center",
            }}
            horizontal={true}
            keyExtractor={FreshGenre.id}
            data={FreshGenre}
            renderItem={(item) => {
              return (
                <FreshGenreItems
                  genreTitle={item.item.title}
                  GenreCoverImage={item.item.coverImg}
                  style={{ width: 300 }}
                />
              );
            }}
          />
        </View>
        <View style={[{ ...flatlistContainer }, { height: "20%" }]}>
          <Text style={{ color: "white", fontSize: 24 }}>ALBUMS</Text>
          <FlatList
            contentContainerStyle={{
              alignItems: "center",
            }}
            horizontal={true}
            keyExtractor={FreshGenre.id}
            data={FreshGenre}
            renderItem={(item) => {
              return (
                <FreshGenreItems
                  genreTitle={item.item.title}
                  GenreCoverImage={item.item.coverImg}
                  style={{ width: 110, height: "50%" }}
                />
              );
            }}
          />
        </View>
        <View
          style={{
            width: "100%",
          }}
        >
          <Text style={discoverText}>Discover</Text>
          <FlatList
            keyExtractor={Updates.id}
            style={{ height: "100%" }}
            maxHeight={200}
            data={Updates}
            renderItem={(item) => {
              return (
                <FreshItemBox
                  songComposer={item.item.composer}
                  title={item.item.title}
                  downloads={item.item.Downloads}
                />
              );
            }}
          />
        </View>
      </ScrollView>
    </View>
  );
};

'''

Любая помощь с этой проблемой?


react-native reactjs react-native-flatlist
person user13707546    schedule 18.08.2020    source источник
comment
Пожалуйста, проверьте FlatList внутри ScrollView не прокручивается   -  person Pankaj    schedule 19.08.2020
comment
@Pankaj .. Моя проблема в другом, и описанный выше метод не сработал, как я ожидал. Проблема в том, что когда я устанавливаю свойство maxHeight для плоского списка, и оно превышает 400, плоский список вообще не прокручивается, а когда st 100, он прокручивается до самого последнего элемента, но тогда высота плоского списка становится такой маленькой и едва заметной.   -  person user13707546    schedule 20.08.2020
comment
Вы пытались вместо этого использовать список разделов? затем добавьте 2 плоских списка как ListHeaderComponent и ListFooterComponent   -  person verunar    schedule 27.11.2020