豆米的博客

前言

额，这篇文章只是为了叙述一下搭建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则会在保持你的程序状态的情况下，就可以将最新的代码部署到设备上。

windows+genymotion搭建react-native安卓开发环境

前言