如何在React Navigation 6.x Native Stack Navigator (RN>0.6)中使用React-native-gesture-handler？

Question

所以，我正在使用React Native v0.66为一家初创公司的实习项目构建原型Android应用程序。在设置项目时，我对RN还不太熟悉，但对React有一定了解。我的导航选择落在React Navigation 6.x和他们的Native Stack Navigator上，因为它比常规的Stack Navigator性能更好，尽管根据文档来说可定制性不如后者。

现在我想在我的项目中使用react-native-gesture-handler。根据他们的文档,

“如果您正在使用像wix/react-native-navigation这样的本机导航库，则需要按照不同的设置方式设置Android应用程序才能正常工作。原因是本机导航库和手势处理库都需要使用自己的特殊子类ReactRootView。

您将需要在JS端使用gestureHandlerRootHOC包装每个屏幕组件，而无需更改Java代码。例如，在注册屏幕时可以完成此操作。”

我想这也包括React Navigation-Native Stack Navigator吧？有一个关于如何使用wix/react-native-navigation实现RNGH的代码示例，但是对于我的情况，在任何地方都没有。

import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import { Navigation } from 'react-native-navigation';

import FirstTabScreen from './FirstTabScreen';
import SecondTabScreen from './SecondTabScreen';
import PushedScreen from './PushedScreen';

// register all screens of the app (including internal ones)
export function registerScreens() {
  Navigation.registerComponent(
    'example.FirstTabScreen',
    () => gestureHandlerRootHOC(FirstTabScreen),
    () => FirstTabScreen
  );
  Navigation.registerComponent(
    'example.SecondTabScreen',
    () => gestureHandlerRootHOC(SecondTabScreen),
    () => SecondTabScreen
  );
  Navigation.registerComponent(
    'example.PushedScreen',
    () => gestureHandlerRootHOC(PushedScreen),
    () => PushedScreen
  );
}

我的app.js（我在其中设置原生堆栈导航器）如下所示：

import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import React from 'react';
import { Provider } from 'react-redux';
import { Store } from './redux/store';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import MenuScreen from './screens/Menu';
import HomeScreen from './screens/Home';
import MyShopsScreen from './screens/MyShops';
import AddProductScreen from './screens/AddProduct';
import ProductDetailsScreen from './screens/ProductDetails';

const Stack = createNativeStackNavigator();

function App() {


  return (
    <Provider store={Store}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false
          }}>

          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Menu" component={MenuScreen} />
          <Stack.Screen name="MyShops" component={MyShopsScreen} />
          <Stack.Screen name="AddProduct" component={AddProductScreen} />
          <Stack.Screen name="ProductDetails" component={ProductDetailsScreen} />



        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App; 

在开始尝试手势处理程序之前，我希望能正确设置环境，否则我可能无法确定是设置有误还是手势处理程序实现有误。

只需将屏幕包装起来，这么简单吗：

<Stack.Screen name="Home" component={HomeScreen} />

到

<Stack.Screen name="Home" component={gestureHandlerRootHOC(HomeScreen)} />

?

我该如何处理需要手势处理的单个组件呢？是像这样将其包装在gestureHandlerRootHOC()中吗？

export default gestureHandlerRootHOC(someComponent)

或许我完全错了？欢迎任何帮助。

更新：

我在项目中实现了react-native-vision-camera并浏览了示例应用程序。当我看到作者mrousavy同时使用Native Stack Navigator和react-native-gesture-handler时，我感到非常高兴。不过他也使用了react-native-reanimated。

//#region Pinch to Zoom Gesture
  // The gesture handler maps the linear pinch gesture (0 - 1) to an exponential curve since a camera's zoom
  // function does not appear linear to the user. (aka zoom 0.1 -> 0.2 does not look equal in difference as 0.8 -> 0.9)
  const onPinchGesture = useAnimatedGestureHandler<PinchGestureHandlerGestureEvent, { startZoom?: number }>({
    onStart: (_, context) => {
      context.startZoom = zoom.value;
    },
    onActive: (event, context) => {
      // we're trying to map the scale gesture to a linear zoom here
      const startZoom = context.startZoom ?? 0;
      const scale = interpolate(event.scale, [1 - 1 / SCALE_FULL_ZOOM, 1, SCALE_FULL_ZOOM], [-1, 0, 1], Extrapolate.CLAMP);
      zoom.value = interpolate(scale, [-1, 0, 1], [minZoom, startZoom, maxZoom], Extrapolate.CLAMP);
    },
  });
  //#endregion

我无法在任何地方找到gestureHandlerRootHOC()的用途，但至少我知道将react-native-gesture-handler和Native Stack Navigator组合是可行的。

我仍然非常希望能够找到类似于wix/react-native-navigation中react-native-gesture-handler文档实现的简洁基本解决方案！

- Max

Answer 1

我选择了以下方式：

<Stack.Screen name="Home" component={HomeScreen} />

to

<Stack.Screen name="Home" component={gestureHandlerRootHOC(HomeScreen)} />

并且将每个屏幕都像这样包装起来。在所有嵌套组件中都能完美运行。欢迎指出此方法的注意事项或陷阱。我暂时接受这个答案。

- Max

---

我尝试过这个，但是onGestureEvent从来没有触发过... - Timmerz