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

时间:2020-08-18 16:25:34

标签: reactjs react-native react-native-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>
  );
};

'''

对这个问题有帮助吗?

0 个答案:

没有答案