search

ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3.02k stars 609 forks source link

The latest version 0.66.3react-native has an error #1207

Closed caijiami closed 2 years ago

caijiami commented 2 years ago

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
caijiami commented 2 years ago

@mcallisto @bang88 @bestv2 @yesmeck Hey, guys, take a look

caijiami commented 2 years ago

The Provider package component reports this error

caijiami commented 2 years ago

"dependencies": { "@ant-design/react-native": "^4.0.2", "@react-native-async-storage/async-storage": "^1.15.6", "@react-native-community/art": "^1.2.0", "@react-native-community/blur": "^3.6.0", "@react-native-community/cameraroll": "^4.1.2", "@react-native-community/segmented-control": "^2.2.2", "@react-native-community/slider": "^3.0.3", "@react-native-community/viewpager": "^4.1.0", "@react-native-picker/picker": "^2.2.1", "aliyun-oss-react-native": "^1.0.0-alpha.7", "axios": "^0.19.2", "jsencrypt": "^3.0.0-rc.1", "lottie-ios": "^3.2.3", "lottie-react-native": "^5.0.1", "prop-types": "^15.7.2", "react": "17.0.2", "react-native": "0.66.3", "react-native-aliyun-push": "^1.0.22", "react-native-animatable": "^1.3.3", "react-native-audio": "^4.3.0", "react-native-calendars": "^1.300.0", "react-native-camera": "^3.38.0", "react-native-charts-wrapper": "^0.5.7", "react-native-color-matrix-image-filters": "^5.2.10", "react-native-device-info": "^5.6.2", "react-native-extra-dimensions-android": "^1.2.5", "react-native-fs": "^2.16.6", "react-native-gesture-handler": "^1.6.1", "react-native-i18n": "^2.0.15", "react-native-image-crop-picker": "^0.29.0", "react-native-image-picker": "^1.1.0", "react-native-image-zoom-viewer": "^3.0.1", "react-native-interactable": "^0.1.10", "react-native-largelist": "^3.1.0-rc.2", "react-native-linear-gradient": "^2.5.6", "react-native-menu": "^0.23.0", "react-native-modal": "^11.5.6", "react-native-newqiniu": "^1.0.1", "react-native-orientation": "^3.1.3", "react-native-permissions": "^2.2.2", "react-native-progress": "^4.1.2", "react-native-qrcode-svg": "^6.1.1", "react-native-ratings": "^8.1.0", "react-native-screens": "^2.9.0", "react-native-shadow": "^1.2.2", "react-native-snap-carousel": "^3.9.1", "react-native-sound": "^0.11.0", "react-native-splash-screen": "^3.2.0", "react-native-spring-scrollview": "^3.0.1-rc.5", "react-native-svg": "^12.1.0", "react-native-thumbnail": "github:phuochau/react-native-thumbnail", "react-native-video": "^5.1.1", "react-native-view-shot": "^3.1.2", "react-native-webview": "^10.3.2", "react-native-wechat-lib": "^1.1.19", "react-navigation": "^3.3.2", "react-navigation-stack": "^1.4.0", "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", "rongcloud-react-native-imlib": "^0.3.13" },

1uokun commented 2 years ago

copy that

1uokun commented 2 years ago

The Provider package component reports this error

Show us red Error Logger more please

caijiami commented 2 years ago

Hard big guy, your component library is particularly important, almost everywhere useful, easy to use <img width="491" alt="截屏2021-12-09 下午4 23 59" src="https://user-images.githubusercontent.com/454

截屏2021-12-09 下午4 24 11

55521/145360369-813328c4-dbfd-4c53-8ee1-7f34aa4262c5.png"> !

Provider包组件报这个错误

Error Logger请给我们更多红色

caijiami commented 2 years ago

image

caijiami commented 2 years ago

The Provider package component reports this error

Show us red Error Logger more please

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at: in LocaleProvider in Provider (at Root.js:88) in Provider (at Root.js:82) in Roots (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 xggs(RootComponent) (at renderApplication.js:60)

BANG88 commented 2 years ago

看得有点累，可以中文沟通。

caijiami commented 2 years ago

哈哈哈，好的大佬，就是0.66.3安卓有这个问题，ios好像可以正常运行的

看得有点累，可以中文沟通。

1uokun commented 2 years ago

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

尝试按照上面3条可能原因去排查一下，未能复现，抱歉

caijiami commented 2 years ago

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

尝试按照上面3条可能原因去排查一下，未能复现，抱歉

这个问题绝对是可以重现的 init一个rn项目， npm install @ant-design/react-native --save npm install @react-native-community/cameraroll @react-native-picker/picker @react-native-community/segmented-control @react-native-community/slider react-native-pager-view npx react-native link 将app.js组件用Provider包裹就重现了 import {Provider, Toast} from '@ant-design/react-native';

Edit App.js to change this screen and then come back to see your edits.
Read the docs to discover what to do next:
caijiami commented 2 years ago
app.js组件内容
caijiami commented 2 years ago

麻烦大佬按照我提供的重现步骤进行检查 十分感谢

caijiami commented 2 years ago

ERROR Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at: in LocaleProvider in Provider (at App.js:64) 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 antTmini(RootComponent) (at renderApplication.js:60)

1uokun commented 2 years ago

可以创建一个可以复现的代码仓库吗

caijiami commented 2 years ago

https://github.com/caijiami/rn_ant 大佬 这是我传的复现代码

可以创建一个可以复现的代码仓库吗

caijiami commented 2 years ago

可以创建一个可以复现的代码仓库吗

大佬 有什么进展吗

OmedMilat commented 2 years ago

@caijiami Did you fix the issue? What was the solution? I am having the same issue ._.

Edit: I fixed it. The issue was an dependency using react-native version 0.63.4.

1uokun commented 2 years ago

可以把解决过程再具体一些吗，好让其他人避免踩坑 @OmedMilat