React Native + AntD的一点点入门踩坑实录

1,909 阅读1分钟

说在前面

因为之前是使用的React,所以在入门移动端的时候选择React Native,加上对Ant Design的框架比较熟悉一点,就打算配合Ant Design Mobile弄个小demo。此次记录一下那些令我挠头的纠结、踩过的坑……

当前项目使用的:

"@ant-design/react-native": "^4.0.7",

"react": "16.13.1",

"react-native": "0.63.4",

1. React Native项目引用jsx文件失败。

image.png

解决:在metro.config.js文件添加该内容:

image.png

2.React Native项目频繁改动后报错

image.png

warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

解决:在andriod目录下cmd运行命令:gradlew clean 就ok啦

3.React Native项目使用antd的tab组件,启动报500

image.png

仔细看问题是出在这个@react-native-community/viewpager。在网上查询后发现已经不支持了!!

image.png

解决:卸载它! 运行:npm uninstall @react-native-community/viewpager

然后用npm install react-native-pager-view 替换,能解决这个问题,但是minSdkVersion版本需要改成17,其次是还得把antd包里引用的地方路径也改掉:

image.png

之后还报了好多个antd内引用了的组件找不到,依然使用 npm install @react-native-community/async-storage等等装一遍,之后总算是成功运行啦!