Material-top-tabs 内的 ReactNative Horizo​​ntal ScrollView（嵌套 ScrollView）

Question

我目前正在尝试在react-navigaionmaterial-top-tabs（也水平滚动）的内容中定位水平ScrollView 。

预期的行为：

在水平 ScrollView 内拖动时，只有 ScrollView 会受到影响并滚动。

当前行为：

有时，当在水平 ScrollView 中拖动时，整个顶部选项卡会滚动。（选项卡正在切换）这对于用户体验来说是一场噩梦。

您知道有什么方法可以让它按预期方式工作吗？

代码片段：

导航.js

// Importing Top Tabs creator
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

...

// Creating the Tab Navigator
const Tab = createMaterialTopTabNavigator();

...

// Configure Navigator
<Tab.Navigator
  initialRouteName="Tab 1"
  screenOptions={{
    headerShadowVisible: false,
    headerStyle: {
      backgroundColor: colors.background,
    },
  }}
  // Using custom TabBar component
  tabBar={(props) => <TabBar {...props} />}
>
  // The horizontal ScrollView is in "Tab 1"
  <Tab.Screen
    name="Tab 1"
    component={Screen1}
    options={{
      headerShown: false,
      unmountOnBlur: true,
    }}
  />
  ...
  <Tab.Screen
    name="Tab 4"
    component={Screen4}
    options={{
      headerShown: false,
        unmountOnBlur: true,
      }}
    />
</Tab.Navigator>

Horizo​​ntalScrollView.js

<ScrollView
  style={{
    display: "flex",
    flexDirection: "row",
    backgroundColor: colors.background,
    paddingHorizontal: 10,
  }}
  horizontal
  showsHorizontalScrollIndicator={false}
  overScrollMode="never"
>
  ...
</ScrollView>

Answer 1

对我有用的是使用从“react-native-gesture-handler”而不是“react-native”导入的 ScrollView 组件。

我不需要做任何额外的设置，它工作得很好。

import {ScrollView} from 'react-native-gesture-handler';