如何导航在我 运行 使用命令 'react-native run-android' 在 Mac 上 React Native 应用程序后显示的错误？
How to navigate errors showing after I run React Native app on Mac with command 'react-native run-android'?
我有 运行 带有命令“react-native 运行-android”的应用程序并且它有效。
但是在使用用户登录信息登录应用程序后，它显示黑色错误屏幕，以下是错误消息。
ERROR TypeError: undefined is not a function
This error is located at:
in Drawer (created by DrawerView)
in DrawerView (created by Navigator)
in Navigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (at View.js:32)
in View (created by CardContainer)
in RCTView (at View.js:32)
in View (created by CardContainer)
in RCTView (at View.js:32)
in View
in CardSheet (created by Card)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (created by Card)
in RCTView (at View.js:32)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (at src/index.native.tsx:252)
in MaybeFreeze (at src/index.native.tsx:251)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (at src/index.native.tsx:330)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in CardStack
in KeyboardManager (created by SafeAreaInsetsContext)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:14)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackView)
in StackView
in Unknown (created by Navigator)
in Navigator (created by NavigationContainer)
in NavigationContainer (at Router.js:101)
in App (at Router.js:127)
in Router (created by Connect(Router))
in Connect(Router) (at navigator/index.js:350)
in _default (at src/index.js:89)
in Provider (at src/index.js:88)
in RCTView (at View.js:32)
in View (at src/index.js:81)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
WARN EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
WARN EventEmitter.removeListener('url', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
ERROR TypeError: undefined is not a function
This error is located at:
in NavigationContainer (at Router.js:101)
in App (at Router.js:127)
in Router (created by Connect(Router))
in Connect(Router) (at navigator/index.js:350)
in _default (at src/index.js:89)
in Provider (at src/index.js:88)
in RCTView (at View.js:32)
in View (at src/index.js:81)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
ERROR TypeError: undefined is not a function
This error is located at:
in NavigationContainer (at Router.js:101)
in App (at Router.js:127)
in Router (created by Connect(Router))
in Connect(Router) (at navigator/index.js:350)
in _default (at src/index.js:89)
in Provider (at src/index.js:88)
in RCTView (at View.js:32)
in View (at src/index.js:81)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in ReactNativeModal (at Loader/index.js:49)
从错误消息中可以看出，错误位于很多地方，但我认为并非如此。我想知道的是我应该如何从错误消息中找出问题所在，错误来自哪里，如果是由于 react/react-native/gradle 版本 isse?
我附上我的 package.json 文件，以便您可以更好地查看。
{
"name": "***",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "source ~/.bash_profile&&react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
"@babel/plugin-transform-arrow-functions": "^7.16.7",
"@babel/plugin-transform-shorthand-properties": "^7.16.7",
"@babel/plugin-transform-template-literals": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@flyerhq/react-native-android-uri-path": "^2.3.0",
"@portify/react-native-datepicker": "^1.7.2",
"@ptomasroos/react-native-multi-slider": "^2.2.2",
"@react-native-async-storage/async-storage": "^1.15.17",
"@react-native-community/art": "^1.2.0",
"@react-native-community/datetimepicker": "^5.1.0",
"@react-native-community/geolocation": "^2.0.2",
"@react-native-community/netinfo": "^4.4.0",
"@react-native-community/push-notification-ios": "^1.10.1",
"@react-native-firebase/app": "^14.3.0",
"@react-native-firebase/messaging": "^14.3.0",
"@sentry/react-native": "^1.9.0",
"add": "^2.0.6",
"apisauce": "^0.14.3",
"axios": "^0.21.0",
"babel": "^6.23.0",
"babel-plugin-module-resolver": "^4.1.0",
"base-64": "^0.1.0",
"bugsnag-react-native": "^2.10.0",
"format-unicorn": "^1.1.1",
"geolib": "^2.0.24",
"jetifier": "^2.0.0",
"lodash": "^4.17.10",
"moment": "^2.29.1",
"prop-types": "^15.6.1",
"react": "17.0.2",
"react-dom": "^17.0.2",
"react-native": "0.67.2",
"react-native-actionsheet": "^2.4.2",
"react-native-animatable": "^1.3.3",
"react-native-collapsible": "^1.6.0",
"react-native-datepicker": "^1.7.2",
"react-native-eject": "^0.1.2",
"react-native-fence-html": "^1.0.6",
"react-native-geocoder": "^0.5.0",
"react-native-gesture-handler": "^2.2.0",
"react-native-htmlview": "^0.13.0",
"react-native-image-crop-picker": "^0.35.1",
"react-native-image-picker": "^4.7.3",
"react-native-image-placeholder": "^1.0.14",
"react-native-image-progress": "^1.1.1",
"react-native-image-resizer": "^1.4.5",
"react-native-keyboard-aware-scroll-view": "^0.5.0",
"react-native-keyboard-manager": "^4.0.13-7",
"react-native-lightbox": "^0.7.0",
"react-native-linear-gradient": "^2.4.0",
"react-native-location-switch": "https://github.com/Miyaguisan/react-native-location-switch",
"react-native-maps": "^0.30.1",
"react-native-message-bar": "^2.0.10",
"react-native-modal": "^6.0.0",
"react-native-modal-datetime-picker": "^13.0.1",
"react-native-openanything": "^0.0.3",
"react-native-pager-view": "^5.4.9",
"react-native-parsed-text": "^0.0.20",
"react-native-permissions": "^3.2.0",
"react-native-progress": "^4.1.2",
"react-native-progress-bar-animated": "^1.0.6",
"react-native-pulse": "^1.0.7",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^2.4.1",
"react-native-responsive-dimensions": "^1.0.2",
"react-native-router-flux": "4.3.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.2",
"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
"react-native-size-matters": "^0.1.0",
"react-native-smart-badge": "^1.1.1",
"react-native-spinkit": "^1.3.0",
"react-native-splash-screen": "^3.0.7",
"react-native-star-rating": "^1.0.9",
"react-native-swipeout": "^2.3.3",
"react-native-swiper": "^1.6.0",
"react-native-tab-view": "^3.1.1",
"react-native-ui-xg": "^0.0.6",
"react-native-web": "^0.17.5",
"react-navigation": "^4.4.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-storage": "^4.1.2",
"redux-storage-decorator-filter": "^1.1.8",
"redux-storage-engine-reactnativeasyncstorage": "^1.0.5",
"rnpm": "^1.9.0",
"seamless-immutable": "^7.1.3",
"tipsi-stripe": "7.5.0",
"yarn": "^1.6.0"
},
"devDependencies": {
"@babel/core": "7.12.9",
"@babel/runtime": "7.17.0",
"@react-native-community/eslint-config": "3.0.1",
"babel-jest": "27.4.6",
"eslint": "8.8.0",
"jest": "27.4.7",
"metro-react-native-babel-preset": "0.67.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
这里是显示错误的屏幕截图：
似乎是 Naviagtion 容器中的问题。如果你没有找到任何尝试重建项目。
我在这里找到了答案Getting 'TypeError: interpolate is not a function' in React-Native
我将 node_modules/react-navigation-drawer/lib/module/views/ 文件夹中 drawer.js 中的 interpolate() 函数替换为 interpolateNode() 函数。
我有 运行 带有命令“react-native 运行-android”的应用程序并且它有效。 但是在使用用户登录信息登录应用程序后，它显示黑色错误屏幕，以下是错误消息。
ERROR TypeError: undefined is not a function
This error is located at:
in Drawer (created by DrawerView)
in DrawerView (created by Navigator)
in Navigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (at View.js:32)
in View (created by CardContainer)
in RCTView (at View.js:32)
in View (created by CardContainer)
in RCTView (at View.js:32)
in View
in CardSheet (created by Card)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (created by PanGestureHandler)
in PanGestureHandler (created by PanGestureHandler)
in PanGestureHandler (created by Card)
in RCTView (at View.js:32)
in View (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (created by Card)
in RCTView (at View.js:32)
in View (created by Card)
in Card (created by CardContainer)
in CardContainer (created by CardStack)
in RNSScreen (at createAnimatedComponent.js:211)
in AnimatedComponent (at createAnimatedComponent.js:264)
in AnimatedComponentWrapper (at src/index.native.tsx:252)
in MaybeFreeze (at src/index.native.tsx:251)
in Screen (created by MaybeScreen)
in MaybeScreen (created by CardStack)
in RNSScreenContainer (at src/index.native.tsx:330)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by CardStack)
in CardStack
in KeyboardManager (created by SafeAreaInsetsContext)
in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by StackView)
in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:14)
in GestureHandlerRootView (created by StackView)
in StackView (created by StackView)
in StackView
in Unknown (created by Navigator)
in Navigator (created by NavigationContainer)
in NavigationContainer (at Router.js:101)
in App (at Router.js:127)
in Router (created by Connect(Router))
in Connect(Router) (at navigator/index.js:350)
in _default (at src/index.js:89)
in Provider (at src/index.js:88)
in RCTView (at View.js:32)
in View (at src/index.js:81)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
WARN EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
WARN EventEmitter.removeListener('url', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
ERROR TypeError: undefined is not a function
This error is located at:
in NavigationContainer (at Router.js:101)
in App (at Router.js:127)
in Router (created by Connect(Router))
in Connect(Router) (at navigator/index.js:350)
in _default (at src/index.js:89)
in Provider (at src/index.js:88)
in RCTView (at View.js:32)
in View (at src/index.js:81)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
ERROR TypeError: undefined is not a function
This error is located at:
in NavigationContainer (at Router.js:101)
in App (at Router.js:127)
in Router (created by Connect(Router))
in Connect(Router) (at navigator/index.js:350)
in _default (at src/index.js:89)
in Provider (at src/index.js:88)
in RCTView (at View.js:32)
in View (at src/index.js:81)
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in View (at AppContainer.js:92)
in RCTView (at View.js:32)
in View (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in ***(RootComponent) (at renderApplication.js:60), js engine: hermes
ERROR Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in ReactNativeModal (at Loader/index.js:49)
从错误消息中可以看出，错误位于很多地方，但我认为并非如此。我想知道的是我应该如何从错误消息中找出问题所在，错误来自哪里，如果是由于 react/react-native/gradle 版本 isse?
我附上我的 package.json 文件，以便您可以更好地查看。
{
"name": "***",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "source ~/.bash_profile&&react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
"@babel/plugin-transform-arrow-functions": "^7.16.7",
"@babel/plugin-transform-shorthand-properties": "^7.16.7",
"@babel/plugin-transform-template-literals": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@flyerhq/react-native-android-uri-path": "^2.3.0",
"@portify/react-native-datepicker": "^1.7.2",
"@ptomasroos/react-native-multi-slider": "^2.2.2",
"@react-native-async-storage/async-storage": "^1.15.17",
"@react-native-community/art": "^1.2.0",
"@react-native-community/datetimepicker": "^5.1.0",
"@react-native-community/geolocation": "^2.0.2",
"@react-native-community/netinfo": "^4.4.0",
"@react-native-community/push-notification-ios": "^1.10.1",
"@react-native-firebase/app": "^14.3.0",
"@react-native-firebase/messaging": "^14.3.0",
"@sentry/react-native": "^1.9.0",
"add": "^2.0.6",
"apisauce": "^0.14.3",
"axios": "^0.21.0",
"babel": "^6.23.0",
"babel-plugin-module-resolver": "^4.1.0",
"base-64": "^0.1.0",
"bugsnag-react-native": "^2.10.0",
"format-unicorn": "^1.1.1",
"geolib": "^2.0.24",
"jetifier": "^2.0.0",
"lodash": "^4.17.10",
"moment": "^2.29.1",
"prop-types": "^15.6.1",
"react": "17.0.2",
"react-dom": "^17.0.2",
"react-native": "0.67.2",
"react-native-actionsheet": "^2.4.2",
"react-native-animatable": "^1.3.3",
"react-native-collapsible": "^1.6.0",
"react-native-datepicker": "^1.7.2",
"react-native-eject": "^0.1.2",
"react-native-fence-html": "^1.0.6",
"react-native-geocoder": "^0.5.0",
"react-native-gesture-handler": "^2.2.0",
"react-native-htmlview": "^0.13.0",
"react-native-image-crop-picker": "^0.35.1",
"react-native-image-picker": "^4.7.3",
"react-native-image-placeholder": "^1.0.14",
"react-native-image-progress": "^1.1.1",
"react-native-image-resizer": "^1.4.5",
"react-native-keyboard-aware-scroll-view": "^0.5.0",
"react-native-keyboard-manager": "^4.0.13-7",
"react-native-lightbox": "^0.7.0",
"react-native-linear-gradient": "^2.4.0",
"react-native-location-switch": "https://github.com/Miyaguisan/react-native-location-switch",
"react-native-maps": "^0.30.1",
"react-native-message-bar": "^2.0.10",
"react-native-modal": "^6.0.0",
"react-native-modal-datetime-picker": "^13.0.1",
"react-native-openanything": "^0.0.3",
"react-native-pager-view": "^5.4.9",
"react-native-parsed-text": "^0.0.20",
"react-native-permissions": "^3.2.0",
"react-native-progress": "^4.1.2",
"react-native-progress-bar-animated": "^1.0.6",
"react-native-pulse": "^1.0.7",
"react-native-push-notification": "^8.1.1",
"react-native-reanimated": "^2.4.1",
"react-native-responsive-dimensions": "^1.0.2",
"react-native-router-flux": "4.3.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.2",
"react-native-scrollable-tab-view": "ptomasroos/react-native-scrollable-tab-view",
"react-native-size-matters": "^0.1.0",
"react-native-smart-badge": "^1.1.1",
"react-native-spinkit": "^1.3.0",
"react-native-splash-screen": "^3.0.7",
"react-native-star-rating": "^1.0.9",
"react-native-swipeout": "^2.3.3",
"react-native-swiper": "^1.6.0",
"react-native-tab-view": "^3.1.1",
"react-native-ui-xg": "^0.0.6",
"react-native-web": "^0.17.5",
"react-navigation": "^4.4.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-storage": "^4.1.2",
"redux-storage-decorator-filter": "^1.1.8",
"redux-storage-engine-reactnativeasyncstorage": "^1.0.5",
"rnpm": "^1.9.0",
"seamless-immutable": "^7.1.3",
"tipsi-stripe": "7.5.0",
"yarn": "^1.6.0"
},
"devDependencies": {
"@babel/core": "7.12.9",
"@babel/runtime": "7.17.0",
"@react-native-community/eslint-config": "3.0.1",
"babel-jest": "27.4.6",
"eslint": "8.8.0",
"jest": "27.4.7",
"metro-react-native-babel-preset": "0.67.0",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
这里是显示错误的屏幕截图：
似乎是 Naviagtion 容器中的问题。如果你没有找到任何尝试重建项目。
我在这里找到了答案Getting 'TypeError: interpolate is not a function' in React-Native
我将 node_modules/react-navigation-drawer/lib/module/views/ 文件夹中 drawer.js 中的 interpolate() 函数替换为 interpolateNode() 函数。