有没有办法解决ScrollView组件中FlatList组件的滚动问题?

问题描述

我试图在滚动视图组件中滚动多个平面列表。平面列表中的两个是水平的,后者垂直滚动。垂直滚动不滚动。我找到了一种使用Flat-List的max-Height属性使其滚动的方法,但是当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>
  );
};

'''

对这个问题有帮助吗?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)