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

Question

因此，我正在构建一个原型 android 应用程序，作为 React Native v0.66 初创公司的实习项目。我刚开始接触 RN，但在设置项目时不是 React。我对导航的选择落在了 React Navigation 6.x 及其 Native Stack Navigator because it performs better than the regular Stack Navigator 上，尽管根据文档无法自定义。

现在我想在我的项目中使用react-native-gesture-handler。根据their docs,

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

无需更改 Java 代码，您需要在 JS 端使用 gestureHandlerRootHOC 包装每个屏幕组件。例如，这可以在您注册屏幕的阶段完成。"

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

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)} />

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

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

How do you implement React-native-gesture-handler with React Navigation 6.x Native Stack Navigator (RN>0.6)?

javascript

android

react-native

react-native-gesture-handler

react-navigation-v6