使用 React Navigation 时，FlatList 和 ScrollView 不使用 React Native Web 滚动答案

【问题标题】：FlatList and ScrollView not scrolling with React Native Web when using React Navigation使用 React Navigation 时，FlatList 和 ScrollView 不使用 React Native Web 滚动
【发布时间】：2021-09-28 05:29:03
【问题描述】：

使用 FlatList 推送 React Navigation Stack 的屏幕会破坏 Web 上的滚动支持。

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

包含具有 flex 属性 style={{flex: 1}} 的父视图
用 ScrollView 替换 FlatList

对我有用的是在 React Navigation 堆栈导航器的 screenOptions 中向 cardStyle 添加一个 flex 属性：

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

【问题讨论】：

标签： react-native react-navigation react-native-flatlist react-native-web react-native-scrollview

【解决方案1】：

对我有用的是在 React Navigation 堆栈导航器的 screenOptions 中向 cardStyle 添加一个 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

【讨论】：