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

Posted 2023-02-19

【中文标题】如何使用 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)?

【发布时间】：2022-01-04 02:08:17

【问题描述】：

所以，我正在为 React Native v0.66 中的一家初创公司构建一个原型 android 应用程序作为实习项目。当我建立项目时，我是 RN 的新手，但不是 React。我对导航的选择落在了 React Navigation 6.x 和他们的 Native Stack Navigator 上，因为它的性能比常规的 Stack Navigator 更好，尽管根据文档不能自定义。

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

“如果您使用的是 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（我在其中设置 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 文档实现！

【参考方案1】：

我只是选择了：

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

到

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

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