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

Question

因此，我正在为 React Native v0.66 中的一家初创公司构建一个原型(prototype) android 应用程序作为实习项目。当我建立项目时，我是 RN 的新手，但不是 React。我对导航的选择落在了 React Navigation 6.x 和他们的 Native Stack Navigator 上。因为它比常规的 Stack Navigator 表现更好，尽管根据文档不能自定义。
现在我想在我的项目中使用 react-native-gesture-handler。根据their docs ,
“如果你使用像 wix/react-native-navigation 这样的原生导航库，你需要遵循不同的设置才能让你的 Android 应用正常工作。原因是原生导航库和 Gesture Handler 库都需要使用自己特殊的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(我设置 Native Stack Navigator 的地方)如下所示:

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 并浏览了 example app .当我看到作者 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 文档实现!

Answer 1

我只是选择了:

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

至

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

并像这样包裹每个屏幕。在所有嵌套组件中也像魅力一样工作。欢迎使用这种方法提出警告或陷阱。我暂时接受这个答案。