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

第一坑.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")"

执行如下命令解决  参考大神的文章

第三坑:

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 [email protected]

重启项目后解决!

第四坑:

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

初始化react-native项目运行采坑_第1张图片

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

你可能感兴趣的:(前端)