React Native

一堆闲话blblbl

React Native的出现，让web的技术与app架起了一座桥梁。原生app的开发复杂，至少每次都要编译，安装，测试，但是原生的体验好。相对于web，nodejs的出现，出现了很多自动化工具，grunt gulp webpack，这些使得代码发生了改变，浏览器中的UI随之改变，布局什么的都很方便。之前的解决方案是通过原生的webview，加载页面，phonegap，ionic就这这么干的。那么我可不可以即用web的快捷又要原生的体验，当我在画android的UI时就在想，什么时候能用css那样方便的画UI，React Native给出了答案，“一切都成为可能”。就这样，一大批做前端的、android、ios、后台的都开启了APP之旅。

搭建windows android开发环境

官网的下载教程

先来android的环境

下载android

配置环境变量 ANDROID_HOME sdk的路径

PATH %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

react-native

//需要安装了node
//全局安装react-native
npm install react-native -g

// 初始化项目 Hello是项目名 
// 这一步会比较慢,下载node_module
react-native init Hello

// 切换到项目路径
cd Hello

// 开始服务，生成js bundle
// 结束了浏览器打开
//http://localhost:8081/index.android.bundle?platform=android 可以看到js
react-native start

// 连接了真机或者启动了模拟器
// 安装
react-native run-android
//

Android 真机调试

示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。

如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。

adb reverse tcp:8081 tcp:8081 如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting > Debug Server host for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）

修改一下index.android.js试试

接下来学习UI吧 https://github.com/facebook/react-native

./gradlew :Examples:Movies:android:app:installDebug
# Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
# Open the Movies app in your emulator

这里还需要安装ndk 配置ndk环境变量

命令行中输入ndk-build检查是否配好