React-Native Screen 未生成基本滚动答案

【问题标题】：React-Native Screen is not generating basic scrollReact-Native Screen 未生成基本滚动
【发布时间】：2020-08-14 07:49:28
【问题描述】：

我是使用 ReactNative 的新手，我创建了一个包含 2-3 个组件的屏幕。一切都运行良好，但后来当我添加更多组件时......我期待看到所有这些都只是在滚动移动，但一切都像没有任何滚动的冻结。如果我将屏幕包装成 <ScrollView> 效果很好，但那里会出现警告。

我在这里遗漏了什么吗？我的其他屏幕工作正常，但那些使用平面列表，我不想在当前屏幕中使用它。

屏幕

<View style={{flex: 1}}>
  <Image 
    style={styles.image} 
    preview={{uri: listing.images[0].thumbnailUrl}}
    tint="light"
    uri={listing.images[0].url} 
  />
  <View style={{flex: 1}}>
    <SomeComponent>Hi</SomeComponent>
    <FlatList>...</FlatList>
    .
    .
    .
    .
    <SomeComponent>More of these that should generate a scrool</SomeComponent>    
  </View>
</View>

【问题讨论】：

使用 ScrollView 时收到的警告是什么？应该可以正常工作。
@JordanDavis 警告：VirtualizaedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 请改用另一个 VirtualizaedLists 支持的容器。注意：我在里面使用了一个 FlatList 组件，这会产生这个警告。
另外，如果我使用 SectionList 而不是 FlatList 我会收到相同的警告。

标签： react-native flexbox

【解决方案1】：

看起来出现此警告是因为您实际上是在滚动视图内渲染滚动视图。

如果您只想在单个可滚动列表中显示项目，一种选择是使用 .map 将组件添加到现有滚动视图中，而不是使用内部的 Flatlist 组件。

解决此问题的另一种方法是使用平面列表ListFooterComponent 和ListHeaderComponent。将 flatlist 上方的所有内容包装在一个组件中，并将其传递给 flatlists ListHeaderComponent prop，然后使用 ListFooterComponent 对 flatlist 下方的项目重复。

最后，如果它被包裹在 ScrollView 中可以正常工作，您可以随时使用隐藏警告

import { YellowBox } from 'react-native'



YellowBox.ignoreWarnings([
  'VirtualizedLists should never be nested', // TODO: Remove when fixed
])

祝你好运！

【讨论】：

【解决方案2】：

问题似乎是您将FlatList 嵌套在ScrollView 中，因此手势系统可能无法理解要使用哪个滚动...

我建议你有更多这样的东西来防止滚动重叠：

<View style={{ flex: 1 }}>
  <FlatList
    ListHeaderComponent={
      <Fragment>
        <Image
          style={styles.image}
          preview={{ uri: listing.images[0].thumbnailUrl }}
          tint="light"
          uri={listing.images[0].url}
        />
        <View style={{ flex: 1 }}>
          <SomeComponent>Hi</SomeComponent>{' '}
        </View>
      </Fragment>
    }
    ListFooterComponent={
      <Fragment>
        . . . .
        
        <SomeComponent>
          More of these that should generate a scrool
        </SomeComponent>
      </Fragment>
    }
  >
    ...
  </FlatList>
</View>

这样您只有一个FlatList，但您仍然可以在之前或之后显示内容。您可以使用 FlatList 道具，这取决于您是否希望页眉和页脚始终可见。

【讨论】：