删除警告：[react-native-gesture-handler] 似乎您正在使用带有手势组件的旧 API，请查看新的手势系统

Question

我正在创建一个项目来学习 React Native。我在这个项目上使用打字稿。我添加了 react-navigation ：要使 react-navigation 正常工作，我必须这样做：

yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context
yarn add react-native-reanimated react-native-gesture-handler

不幸的是，我的 yarn 开始时有这个警告：

 WARN  RCTBridge required dispatch_sync to load RNGestureHandlerModule. This may lead to deadlocks
 LOG  Running "TddReactNative" with {"rootTag":11,"initialProps":{}}
 WARN  [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! 
PanGestureHandler@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:137194:38
PanGestureHandler@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:136501:34
RCTView
View
AnimatedComponent@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:68816:38
AnimatedComponentWrapper
RCTView
View
Card@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:135767:36
CardContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:135324:34
RNSScreen
AnimatedComponent@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:68816:38
AnimatedComponentWrapper
MaybeFreeze@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161553:23
Screen@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161620:36
MaybeScreen@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161373:24
RNSScreenContainer
ScreenContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161753:31
MaybeScreenContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:161344:23
RCTView
View
Background@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:123808:21
CardStack@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:133002:36
RNCSafeAreaProvider
SafeAreaProvider@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:131859:24
SafeAreaProviderCompat@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:132694:24
RCTView
View
GestureHandlerRootView
StackView@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:122717:36
StackNavigator@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:122563:32
EnsureSingleNavigator@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:124954:24
BaseNavigationContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:124463:28
ThemeProvider@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:130618:21
NavigationContainerInner@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:130478:26
AppNavigator
RCTView
View
RCTView
View
AppContainer@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:76309:36
TddReactNative(RootComponent)@http://192.168.3.2:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.TddReactNative:83059:28

我尝试删除 pods 并使用 :

重新安装它们

cd ios
rm -rf Pods/
pod install

之后，我重新启动了 yarn start 和 XCode 的应用程序。

这是我的 react-navigations 和其他依赖项的版本：

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@types/styled-components": "^5.1.20",
    "moment": "^2.29.1",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.2.0",
    "react-native-get-location": "^2.2.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.2",
    "styled-components": "^5.3.3"
  },

我正在 Iphone13 上测试应用程序。这只是一个警告，但有人知道为什么会出现此警告以及如何删除它吗？

Answer 1

react-native-gesture-handler 的新版本 如果您使用旧的 API 版本，但如果您的 [=22] 之一发送警告=] 使用它。

要禁用警告，您可以忽略日志。

在你的 app.js / app.tsx

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  "[react-native-gesture-handler] Seems like you\'re using an old API with gesture components, check out new Gestures system!",
]);

GitHub thread about this topic

Answer 2

Use yarn add @react-navigation/native-stack -> {createNativeStackNavigator()}

导航器和屏幕使用 @react-navigation/native-stack 包而不是 @react-navigation/stack

仅在需要导航功能时应用此功能 @react-navigation/stack 允许您使用 Java 脚本实现自定义转换，但如果您不深入了解屏幕转换，@react-navigation/native-stack 就足够了导航和屏幕

删除警告：[react-native-gesture-handler] 似乎您正在使用带有手势组件的旧 API，请查看新的手势系统

Remove Warning : [react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system

ios

typescript

react-native

react-navigation

react-native-gesture-handler