使用 React Navigation 时，FlatList 和 ScrollView 不会随 React Native Web 一起滚动

Question

使用 FlatList 推送 React 导航堆栈的屏幕将破坏 Web 上的滚动支持。

尝试了几种建议的解决方案 - 这些都不起作用：

• 包含具有 flex 属性的父视图

  style={{flex: 1}}

• 用 ScrollView 替换 FlatList

对我有用的是在 React Navigation 堆栈导航器的

cardStyle

中向

screenOptions

添加一个 flex 属性：

<Stack.Navigator mode="card" screenOptions={{ cardStyle: { flex: 1 } }}>
  <Stack.Screen name="MyScreen" component={MyScreen} />
</Stack.Navigator>

Answer 1

对我有用的是在 React Navigation 堆栈导航器的

cardStyle

中向

screenOptions

添加一个 flex 属性：

<Stack.Navigator mode="card" screenOptions={{ cardStyle: { flex: 1 } }}>
  <Stack.Screen name="MyScreen" component={MyScreen} />
</Stack.Navigator>

另请参阅： https://github.com/react-navigation/react-navigation/issues/6165

Answer 2

我遇到了这个错误，并花了很长时间试图找到根源。我有一个 FlatList，它假设是罪魁祸首...但即使在注释掉之后，错误仍然存在...经过多次缓存刷新...我将问题追溯到在本机基础 Modal 内有一个本机基础 Select。

Answer 3

这个解决方案对我有用。 我们通过使用

flexGrow: 1

并启用

overflow

来限制视图的高度。

<Stack.Navigator
  screenOptions={{
    contentStyle: ((Platform.OS === 'web') ? {
      flexGrow: 1,
      overflow: 'scroll'
    } : {}),
  }}
>