初始化react-native项目运行采坑

港控/mmm° 2022-05-13 23:24 259阅读 0赞

第一坑.react和react-native版本配合有很高的要求

init项目启动后报如下错误：

**error: bundling failed: "Unable to resolve module \`AccessibilityInfo\` from \`/Users/apple/WebstormProjects/carracing2/node\_modules/react-native/Libraries/react-native/react-native-implementation.js\`: Module does not exist in the module map\\n\\nThis might be related to https://github.com/facebook/react-native/issues/4968\\nTo resolve try the following:\\n  1. Clear watchman watches: \`watchman watch-del-all\`.\\n  2. Delete the \`node\_modules\` folder: \`rm -rf node\_modules && npm install\`.\\n  3. Reset packager cache: \`rm -fr $TMPDIR/react-\*\` or \`npm start -- --reset-cache\`."**

遇到这种情况，是因为版本太高了，推荐如下版本：

"dependencies": \{  
    "babel-preset-react-native": "2.1.0",  
    "react": "16.4.1",  
    "react-native": "^0.54.0"  
  \}

更换版本后，记得删除node\_modules文件夹，然后npm install重新下载，切记！

第二坑：

error: bundling failed: "TransformError: /Users/guochao/Desktop/rndemo/AwesomeProject/index.ios.js: Unexpected token ) (While processing preset: "/Users/guochao/Desktop/rndemo/AwesomeProject/node\_modules/babel-preset-react-native/index.js")"

此时使用react-native run-android发现还是不能启动项目，报错：

**error: bundling failed: "TransformError: /Users/guochao/Desktop/rndemo/AwesomeProject/index.ios.js: Unexpected token ) (While processing preset: "/Users/guochao/Desktop/rndemo/AwesomeProject/node\_modules/babel-preset-react-native/index.js")"**

执行如下命令解决  [参考大神的文章][Link 1]：

*  `yarn remove babel-preset-react-native`
 *  `yarn add babel-preset-react-native@2.1.0`

第三坑：

**error: bundling failed: Error: Unable to resolve module \`AccessibilityInfo\` from \`C:\\Users\\Administrator\\Desktop\\rntest\\AwesomeProject\\node\_modules\\react-native \\Libraries\\react-native\\react-native-implementation.js\`: Module \`AccessibilityIn fo\` does not exist in the Haste module map**

执行如下命令：

npm uninstall --save babel-preset-react-native

npm install --save babel-preset-react-native@4.0.0

重启项目后解决！

第四坑：

![70][]

如果你看到那段黄色文字，以为项目不能启动，那就大错特错了，看项目是否启动，应该看这里才对：

![70 1][]

每每刷新一次项目，这里就会重新编译一次。

[Link 1]: https://blog.csdn.net/m0_37829185/article/details/77449492
[70]: /images/20220514/8b0e5bd41d0441b4bd31fafde63298b3.png
[70 1]: /images/20220514/eddf8ed27bbe45e08443c3ea21cb4134.png