React Native 环境搭建 初始化项目 运行 调试
2017-09-03 15:34
405 查看
关于RN,前些日子写过一篇初始化项目的,本文在项目已经构建完毕基础上,下面贴出上篇文章连接:
Hello RN
按照上面文章走过一遍之后我们应该就运行起来了,但是RN的开发IDE用什么呢?
看过一些文章,也做过一些尝试:
1.官方推荐是ATMO+Nuclide。百度搜Atom官网,去下载即可,下载之后打开安装几个开发常用的插件:
open-in-browser
autocomplete-paths
atom-html-preview
2.WebStorm(个人比较喜欢他们公司的几款软件),但是还是不如下面这个方便,快捷。
3.Sublime Text 3.这个就厉害了,确实很方便。只需要安装几个插件:
ReactJS : 支持React开发,代码提示,高亮显示
Emmet :前端开发必备。
Terminal : 在sublime中打开终端并定位到当前目录,神器,mac下的快捷键为:command+shift+T
具体安装步骤参考下面大神的博客:
Sublime 插件安装
其中静态代码检查那里有些问题,请看下面大神的文章,写的很详细,有问题我们再来讨论。
静态代码检查插件配置
下面就是我用Sublime打开我的项目之后目录:
这时候我们要运行我们的项目,前提你安装过上面的一个插件(Terminal)后,按command+shift+T,就会打开终端,直接进入到你项目目录下。
没安装也不要紧,打开终端一步两步一步两步进入到你项目目录下。
此时,我们先运行到iOS模拟器上:
终端输入react-native run-ios回车,等待编译,就可以运行到我们ios模拟器上了。
这时候我们改变目录最外层的index.ios.js文件中的代码:
只改了原来的几句话。
现在想刷新模拟器上我们已经运行的项目按照原生开发就是:
重新编译运行,而RN我们只需要在模拟器上(iOS)按command+r即可。
如果不好使,你检查下你模拟器的键盘响应是否关了,下图:
这样随时就可以刷新我们的应用了。
下面看看Android,由于本人电脑内存快满了,所以卸载了很多应用(包括Android的genymotion),所以我用的是真机。
连接好电脑之后,在刚才的终端输入:react-native run-android 回车 编译。
运行到手机之后,刚才我们在index.ios.js文件里改了几句话,现在我们在index.android.js文件中随便也改几句。
这时候刷新就是,晃动真机的屏幕,会出现一个弹窗,第一个选项就是Reload,刷新!!!!
可能会遇到红屏幕的一个错误 could not connect to development server。
需要我们给应用设置一下本机ip:8081
下面贴出mac获取本机ip方法,新建个终端窗口,输入:
ifconfig | grep "inet " | grep -v 127.0.0.1
就出来了。
然后怎么设置呢?还是晃动手机屏幕,菜单里Dev Settings ----> Debug server host & port for device
点击之后会有个输入的弹窗,你输入你刚才获取的本机的ip:8081。
确定之后返回返回返回,重新Reload。好了!!!!
最后贴出中文官网:
中文官网
这两篇主要记录下开发前期的一些小操作。
Hello RN
按照上面文章走过一遍之后我们应该就运行起来了,但是RN的开发IDE用什么呢?
看过一些文章,也做过一些尝试:
1.官方推荐是ATMO+Nuclide。百度搜Atom官网,去下载即可,下载之后打开安装几个开发常用的插件:
open-in-browser
autocomplete-paths
atom-html-preview
2.WebStorm(个人比较喜欢他们公司的几款软件),但是还是不如下面这个方便,快捷。
3.Sublime Text 3.这个就厉害了,确实很方便。只需要安装几个插件:
ReactJS : 支持React开发,代码提示,高亮显示
Emmet :前端开发必备。
Terminal : 在sublime中打开终端并定位到当前目录,神器,mac下的快捷键为:command+shift+T
具体安装步骤参考下面大神的博客:
Sublime 插件安装
其中静态代码检查那里有些问题,请看下面大神的文章,写的很详细,有问题我们再来讨论。
静态代码检查插件配置
下面就是我用Sublime打开我的项目之后目录:
这时候我们要运行我们的项目,前提你安装过上面的一个插件(Terminal)后,按command+shift+T,就会打开终端,直接进入到你项目目录下。
没安装也不要紧,打开终端一步两步一步两步进入到你项目目录下。
此时,我们先运行到iOS模拟器上:
终端输入react-native run-ios回车,等待编译,就可以运行到我们ios模拟器上了。
这时候我们改变目录最外层的index.ios.js文件中的代码:
只改了原来的几句话。
现在想刷新模拟器上我们已经运行的项目按照原生开发就是:
重新编译运行,而RN我们只需要在模拟器上(iOS)按command+r即可。
如果不好使,你检查下你模拟器的键盘响应是否关了,下图:
这样随时就可以刷新我们的应用了。
下面看看Android,由于本人电脑内存快满了,所以卸载了很多应用(包括Android的genymotion),所以我用的是真机。
连接好电脑之后,在刚才的终端输入:react-native run-android 回车 编译。
运行到手机之后,刚才我们在index.ios.js文件里改了几句话,现在我们在index.android.js文件中随便也改几句。
这时候刷新就是,晃动真机的屏幕,会出现一个弹窗,第一个选项就是Reload,刷新!!!!
可能会遇到红屏幕的一个错误 could not connect to development server。
需要我们给应用设置一下本机ip:8081
下面贴出mac获取本机ip方法,新建个终端窗口,输入:
ifconfig | grep "inet " | grep -v 127.0.0.1
就出来了。
然后怎么设置呢?还是晃动手机屏幕,菜单里Dev Settings ----> Debug server host & port for device
点击之后会有个输入的弹窗,你输入你刚才获取的本机的ip:8081。
确定之后返回返回返回,重新Reload。好了!!!!
最后贴出中文官网:
中文官网
这两篇主要记录下开发前期的一些小操作。
相关文章推荐
- react-native学习(RN)--之Window环境下搭建环境配置,以及初始化建立react-native项目,(真机和模拟器运行的相关错误解决办法,android打包报错)
- React Native 环境搭建, 新建项目, 运行和调试
- Tomcat7调试运行环境搭建与源代码分析入门
- 零基础 Vue 开发环境搭建 打开运行Vue项目
- maven环境搭建并运行springboot项目
- ReactNative环境搭建与初始化项目
- Tomcat7调试运行环境搭建与源代码分析入门
- win7环境下.net的web环境搭建及其项目的加载运行
- GitHub 版本控制 项目托管 02 搭建GitHub运行环境
- Linux 学习第一天 搭建环境,编译,调试,运行
- Tomcat7调试运行环境搭建与源代码分析入门
- 使用Fiddler搭建手机调试环境(我做得项目是调试微信的公众号)
- 【Hibernate框架开发之一】搭建Hibernate环境并成功运行第一个项目HelloHibernate并解决3个常出现的运行问题;
- phonegap 4.2 环境搭建 及 项目创建 运行
- React Native 环境搭建 配置 调试 React Native for Android APP
- Editplus搭建C/C++运行环境,包括gdb调试功能
- 模拟搭建Web项目的真实运行环境(五)
- 使用Fiddler搭建手机调试环境(我做得项目是调试微信的公众号)
- Tomcat7调试运行环境搭建与源代码分析