- 发布的0.56.0版本在windows下有bug不能正常运行
请init 0.55.4的版本
react-native init MyApp --version 0.55.4 - cd MyApp
进入项目文件,在运行之前需要先连接设备 - 安装模拟器(我使用的是夜神模拟器),打开模拟器并连接模拟器
进入夜神安装目录的bin目录下运行,或sdk所在的platform-tools目录下:
>adb connect 127.0.0.1:62001
还可以使用逍遥模拟器:
逍遥模拟器 >adb connect 127.0.0.1:21503
注:当前必须只能有一个机子连着电脑,无论是模拟器还是真机!
- 查看是否连接成功
>adb devices
出现下面的东西就说明手机连接成功,此时就可以启动项目了
- 开启react-native 项目
react-native run-android
- 、进入项目后会出现红屏,如图:
解决方法:摇一摇手机,模拟器的右边工具栏有摇一摇功能,弹出菜单,选择Dev Settings —> Debug server host&port for device(若模拟器摇一摇无法弹出菜单,模拟器最右侧有个菜单键,可以打开菜单
),在弹出的对话框中输入你电脑的IP:8081,电脑的ip可以在cmd中输入ipconfig 查看, IPv4 地址 . . . . . . . . . . . . : 192.168.2.777(这个)
点击确定,之后reload! - 此时需要重启设备
在手机端关闭项目进程,然后在cmd中执行 react-native run-android 重新启动一遍。 此时就大功告成了,可以在项目里面的app.js文件中编译。 - 若想react developer Tools与模拟器进行调试,可通过以下步骤执行
(1)、全局安装react-devtools
npm install -g react-devtools
注意:如果您希望避免全局安装,可以将react-devtools添加为项目依赖项。 使用npm install --save-dev react-devtools将react-devtools包添加到项目中,然后将“react-devtools”:“react-devtools”添加到package.json中的scripts部分,然后运行npm run react -devtools从项目文件夹中打开DevTools。
(2)、安装完成后在命令行中执行react-devtools即可启动此工具(此时react-native 项目已开启且夜神模拟器也已开启):
react-devtools
(3)摇一摇手机,模拟器的右边工具栏有摇一摇功能,弹出菜单(如果模拟器的分辨率设置为手机版不是平板板,摇一摇是无法弹出菜单的,模拟器最右侧有个菜单键,可以打开菜单
),选择"Toggle Inspector",它将打开一个叠加层,让您点按任何UI元素并查看有关它的信息,如下图
您可以在同一菜单中选择“Toggle Inspector”以退出此模式。 - 当出现yarn add一个插件报这个错误时,operation not permitted, unlink 'E:\android_source\MyApp\node_modules@babel\template\n
解决方案:
(1)、 打开项目node_modules/react-native/local-cli/server/server.js
(2)、找到 process.on(‘uncaughtException’, error =>
{ })这个方法,把最后一句 process.exit(11); 注释掉。
再次运行就ok了!