windows+genymotion搭建react-native安卓开发环境
前言
额,这篇文章只是为了叙述一下搭建react-native环境的几个步骤,不会对react-native的本身做过多的介绍~~~
react-native的简单介绍
哈哈哈~~没有过多的介绍,那么简单地介绍还是可以的(鬼脸状),下面的介绍引用了React Native Android 踩坑之旅的一段话(感谢小丁童鞋):
- react native的代码和react基本一样,组件的生命周期,jsx语法都支持,只是在使用jsx时要经常调用官方提供的组件。
- react native里面的样式大部分是可以利用css语法来写的,只有文档里面有的属性才能用,不是所有的css都可以在react-native里面用的,采用obj的形式将css属性横杠后面的第一个字母大写即可。
- react的宽高度不支持百分比,设置宽高度时不需要带单位,在react-native里面默认使用pt为单位,注意在给image设置大小时要根据 PixelRatio 设置合适的值。
- 使用dimensions.get("window")可以获取到当前viewport的大小,这个值可能会根据屏幕横竖来动态改变。
- react native里面没有float的用法,是根据flex来布局,alignItems和justifyContent分别决定子元素的布局,而flexDirection决定子元素的排列方式垂直还是水平,flex:number决定子元素所占的比例,alignSelf决定元素本事的布局,子view会默认根据父view来absolute,这里有个技巧,如果想让子view实现100%的效果可以设置left:0 ,right :0,同理height可以用top:0,bottom:0。
- 使用text的numberOfLines可以实现文本截取省略号,即css的text-overflow属性。
- 默认情况下如果元素超过了父元素,是不可以滚动的,必须在外部套一个
才可以。 - react native里面没有z-index的概念,是根据jsx语法里面定义组件的顺序来实现的,后写的组件会覆盖在先写的组件上。
1.安装Genymotion
react-native推荐使用genymotion,所以嘛我就听人家说的,就不使用Android Studio,戳我下载genymotion
-
点击上面的地址之后,会出现让你登录或者注册的页面,你需要注册一个账号(如果没有账号的话),或者登录进去
-
成功之后你会见到下面这张下载的图片,如果本地已经有了VB,那么就不再需要安装了,所以选择下面的那个版本
2. 安装Android SDK
因为我们没有安装Android Studio,所以需要单独安装SDK。戳我下载Android Studio。将页面滑到下图的位置,选择windows的第一个链接,如果你的网络被屏蔽掉了,可以在百度云盘上下载下来,当前版本是v24.4.1,链接:https://pan.baidu.com/s/1dELbFmL,提取码:k8kq。
下载安装完成之后,会有如下两个软件:
接下去配置环境变量:Win+R --> sysdm.cpl --> 高级 --> 环境变量 --> 系统变量, 添加ANDROID_HOME这个变量,然后将其下面的参数加到PATH中去:
%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
记得这些动作的前提下是你有安装了JAVA。
接着我们打开SDK Manager,安装一下需要的开发工具,记住因为我们使用了Genymotion,所以不需要安装SDK中的那些Image(如果安装了Android安装路径的文件夹大小会变得好大,据说有十几个G),所以我的配置如下:
3. 安装任意一款手机模拟器
打开Genymotion,点击Add
,记得使用刚才的用户名登录,选中任意一款你想测试的安卓手机,点击安装,安装成功之后如下:
这个时候记得配置这个:
否则在接下去运行react-native的时候会报错:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: Timeout getting device list.
4. 安装React Native命令行工具并测试
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-android
运行成功应该会有如下界面:
直接在电脑浏览器上打开:http://localhost:8081/index.android.bundle?platform=android 就可以查看到当前最终编译成的文件,我们可以简单将这个文件理解成一个html, android就是通过解析这个html来达到渲染的目的,将该文件部署到CDN可供android app从网络获取,即可实现不用发版本让app的UI随时更新,并且可获得接近native的体验,这也是react-native最吸引开发者的亮点之一。
命令行执行的过程图片如下:
如果出现了Unable to connect with remote debugger.
,建议重启一下React-native,并且建议模拟器的开启可以放在react-native启动完毕再打开,因为我发现貌似二者的时间差如果过大很容易出现这个错误。
5. 开发和调试的几个小技巧
每次成功加载应用之后会自动在浏览器中打开这么一个页面:http://localhost:8081/debugger-ui
,页面内容:
React Native JS code runs inside this Chrome tab.
Press ⌘⌥J to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience.
Status: Debugger session #0 active.
因为此时我开启了远程调试,所以显示#0 active
。打开手机的调试菜单:Ctrl + M
选中Start Remote JS Debugging
即可远程调试。另外还可以使能Live Reload
和Hot Reloading
。在Dev Setting
中还有其他配置:
在Chrome中并不能直接看到App的用户界面,而只能提供console的输出,以及在sources项中断点调试js脚本。如图所示:
另外在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V
可以看到你的应用的日志。
Tips: live reload 和hotreload的区别
在 Developer Menu中你会看到”Enable Live Reload” 选项,该选项提供了React Native动态加载的功能。当你的js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手机上
如果说Enable Live Reload解放了你的双手的话,那么Hot Reloading不但解放了你的双手而且还解放了你的时间。 当你每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包,然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上。
参考
公众号关注一波~
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 windows+genymotion搭建react-native安卓开发环境 的内容有疑问,请在下面的评论系统中留言,谢谢。