ReactNative环境搭建遇到的那些坑
ReactNative版本0.51
按照官方文档执行一下命令：（node，watchman已经存在）
npm install -g yarn react-native-cliyarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --globalreact-native init AwesomeProject
cd AwesomeProject
react-native run-iosinfo 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.
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 [email protected] --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.
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有着对图片的严格检查，工程中存在不符合要求的图片。
解决方案：
- android {
- ......
- aaptOptions.cruncherEnabled = false
- aaptOptions.useNewCruncher = false
- ......
- }