开始React Native开发IOS,该帖纪录所有过程中遇到的坑



  • 1. react-native init myApp 等了一个下午(已经解决)

    明显,这个估计很多人都遇到过入门级别的大坑。多的不说,说多了都是累。直接上解决方法,快捷无痛

    npm install -g nrm   # nrm 是一个切换 npm package 的镜像。
    nrm use taobao       # 使用淘宝镜像
    npm install -g react-native-cli
    react-native init myApp
    
    

    2. npm start 出现错误(已经解决)

    • TransformError: /Users/Hie/Documents/Xcode-project/FARSER/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/Hie/Documents/Xcode-project/FARSER/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/Hie/Documents/Xcode-project/FARSER/node_modules/react-deep-force-update/.babelrc.stage

      解决方案是清除 babelrc文件,可以在react-native init后在package.json文件中替换如下的script:

      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
        "postinstall": "npm run clean:babelrc"
      },
      
    • Failed to build DependencyGraph: Naming collision detected

      解决方案是安装 fbjs@0.6.0,然后新建文件rn-cli-config.js在项目根目录下,内容为:

      var blacklist= require("react-native/packager/blacklist");
      var config = {
          getBlacklistRE(platform) {
              return blacklist(platform,[/APPNAME.+\/node_modules\/fbjs.*/]);
          }
      }
      module.exports = config;
      

    3. 引入图片出现错误(未解决)

    • Image source size {50,46} does not match loaded image size {0,0}