首页 > 解决方案 > 滚动视图中的水平和垂直嵌套平面列表

问题描述

我在滚动视图中有 3 个平面列表;x2 水平(在组件中和另一个垂直;

return (

    <ScrollView>
      <View style={styles.body}>
        <Text style={styles.titlesnopadding}>Watch</Text>
        <View style={{height:200}}>
         <Watch/>
        </View>
        <Text style={styles.titles}>Match reports</Text>
        <View style={{height:100}}>
        <MatchReports typeOfProfile='Men'/>
        </View>
      <Text style={styles.titles}>Latest News</Text>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
          <View>
            <Image style={styles.img} source={{ uri: chkValue(item.jetpack_featured_media_url) }} />
            <View>
                <Text style={styles.textbck}>{item.title.rendered.replace(/<\/?[^>]+(>|$)/g, "")}</Text>
                <Text style={styles.summary}>{item.excerpt.rendered.replace(/<\/?[^>]+(>|$)/g, "")}{"\n"}{Moment(item.date, "YYYYMMDD").fromNow()}</Text>
          </View>
          </View>
          )}
        />
      )}
    </View>
    </ScrollView>
  );
};

我不断收到警告;

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

我四处搜索,只能找到代码已将项目放置在固定页眉/页脚场景中的示例,但我希望用户能够水平滚动相关的平面列表,但如果他们随后垂直滚动它会滚动所有内容(显示页脚导航选项卡,工作正常)。

除了滚动视图,我还能使用什么?

标签: react-native

解决方案


推荐阅读