ReactNative环境搭建遇到的那些坑

ReactNative版本0.51

按照官方文档执行一下命令：（node，watchman已经存在）

npm install -g yarn react-native-cli

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

遇到的第一个错误是：error Received malformed response from registry for undefined. The registry may be down.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
{ Error: Command failed: yarn add react-native --exact
    at checkExecSyncError (child_process.js:591:13)
    at execSync (child_process.js:631:13)
    at run (/usr/local/lib/node_modules/react-native-cli/index.js:294:5)
    at createProject (/usr/local/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/usr/local/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
  error: null,
  cmd: 'yarn add react-native --exact',
  file: '/bin/sh',
  args: [ '/bin/sh', '-c', 'yarn add react-native --exact' ],
  options:
   { stdio: [ [Object], [Object], [Object] ],
     shell: true,
     file: '/bin/sh',
     args: [ '/bin/sh', '-c', 'yarn add react-native --exact' ],
     envPairs:
      [ 'TERM_PROGRAM=Apple_Terminal',
        'SHELL=/bin/bash',
        'TERM=xterm-256color',
        'TMPDIR=/var/folders/hn/flfx2mnd237974bkycxx4cyr0000gn/T/',
        'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.doVsJqajaI/Render',
        'TERM_PROGRAM_VERSION=404',
        'TERM_SESSION_ID=3A4EEA90-61EB-4617-8A82-4FD0839E0D7B',
        'USER=mac',
        'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.SugzQee0nY/Listeners',
        'PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/Wireshark.app/Contents/MacOS',
        'PWD=/Users/mac/Desktop',
        'LANG=zh_CN.UTF-8',
        'XPC_FLAGS=0x0',
        'XPC_SERVICE_NAME=0',
        'SHLVL=1',
        'HOME=/Users/mac',
        'LOGNAME=mac',
        '_=/usr/local/bin/react-native',
        'OLDPWD=/Users/mac',
        '__CF_USER_TEXT_ENCODING=0x1F5:0x19:0x34' ],
     killSignal: undefined },
  envPairs:
   [ 'TERM_PROGRAM=Apple_Terminal',
     'SHELL=/bin/bash',
     'TERM=xterm-256color',
     'TMPDIR=/var/folders/hn/flfx2mnd237974bkycxx4cyr0000gn/T/',
     'Apple_PubSub_Socket_Render=/private/tmp/com.apple.launchd.doVsJqajaI/Render',
     'TERM_PROGRAM_VERSION=404',
     'TERM_SESSION_ID=3A4EEA90-61EB-4617-8A82-4FD0839E0D7B',
     'USER=mac',
     'SSH_AUTH_SOCK=/private/tmp/com.apple.launchd.SugzQee0nY/Listeners',
     'PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/Wireshark.app/Contents/MacOS',
     'PWD=/Users/mac/Desktop',
     'LANG=zh_CN.UTF-8',
     'XPC_FLAGS=0x0',
     'XPC_SERVICE_NAME=0',
     'SHLVL=1',
     'HOME=/Users/mac',
     'LOGNAME=mac',
     '_=/usr/local/bin/react-native',
     'OLDPWD=/Users/mac',
     '__CF_USER_TEXT_ENCODING=0x1F5:0x19:0x34' ],
  stderr: null,
  stdout: null,
  pid: 50318,
  output: [ null, null, null ],
  signal: null,
  status: 1 }
Command `yarn add react-native --exact` failed.
macdeMac-mini:Desktop mac$ npm config set registry https://registry.npm.taobao.org

解决方案：

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

顺便删除yarn，删除方法：cd /usr/local/bin   rm yarn   (mac本)

进行第二次尝试：react-native init xxx  又出现问题

npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://cdn.npm.taobao.org/abab/-/abab-1.0.4.tgz failed, reason: getaddrinfo ENOTFOUND cdn.npm.taobao.org cdn.npm.taobao.org:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mac/.npm/_logs/2018-05-24T07_42_53_181Z-debug.log
child_process.js:634
    throw err;
    ^

Error: Command failed: npm install jest babel-jest babel-preset-react-native react-test-renderer@16.3.1 --save-dev --save-exact
    at checkExecSyncError (child_process.js:591:13)
    at execSync (child_process.js:631:13)
    at generateProject (/Users/mac/Desktop/AwesomeProject/node_modules/react-native/local-cli/init/init.js:96:7)
    at Object.init (/Users/mac/Desktop/AwesomeProject/node_modules/react-native/local-cli/init/init.js:50:5)
    at run (/usr/local/lib/node_modules/react-native-cli/index.js:302:7)
    at createProject (/usr/local/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/usr/local/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (module.js:573:30)

    at Object.Module._extensions..js (module.js:584:10)

解决方案：降低版本

react-native init MyApp --version 0.41.0（降低到0.44.0以下就OK了）

此时下载源工程没有出错，接下来在真机上运行，运行步骤如下：

1.androidstudio打开工程目录下的android工程

2.webstrom打开工程根目录

3.运行Androidstudio原生功能，使其在手机上运行起来。

4.配置ip 查看电脑ip，晃动手机，在dialog上选择Dev Setting->Debug server host & port for device输入ip填入默认端口8081

5.命令行工具中目录调整到根目录下，输入命令react-native run-android 或者npm start 或者 react-native start

6.晃动手机在dialog选择Reload选项，或者直接点击错误界面下方的Reloada按钮，观察命令行输入。

原生部分错误：

Error:Execution failed for task ':app:mergeDebugResources'. > Error: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:

错误原因：Androidstudio有着对图片的严格检查，工程中存在不符合要求的图片。

解决方案：

1. android {  
2.       
3.    ......  
4.   
5.     aaptOptions.cruncherEnabled = false  
6.     aaptOptions.useNewCruncher = false  
7.   
8.    ......  
9. }
   

以上就是我遇到的坑，就酱紫~~~