TAT.simplehuang React Native for Android Windows 环境搭建
In 未分类 on 2016年03月05日 by view: 10,638
8

环境搭建

1. 准备工作

 AndroidStudio  安卓开发 IDE  推荐下载含 SDK tools 版

 JDK for Windows Java 软件开发工具包

 Nodejs nodejs 环境

2. 安装 ReactNative 步骤

 1) 使用 npm 安装 ReactNative

在 cmd 命令工具中执行以下命令,注意并非 install react-native,装了 react-native 在后面 init 项目的时候会报错,需要卸掉再重装。

 2) 可能遇到的问题:

报错:npm-install-save-react-native-failed

解决办法:升级 nodejs 及 npm 版本

报错:'xxx’ 不是内部或外部命令

解决办法:设置对应命令为环境变量或安装对应的命令工具

3. 安卓环境搭建

 1)JDK 安装

运行已下载的 jdk-xxxx-windows-x64.exe 进行安装,如本地已有 JDK 可跳过本条。

 2)AndroidStudio 安装

运行已下载的 android-studio-bundle-xxx-windows.exe 进行安装

 图片1

安装 Android Studio 完毕后,需要检查 Android SDK 是否齐全,对应需要的 SDK 如下所示:

图片2

图片3

ReactNative 开发调试体验

1.HelloWorld 程序

在 AndroidStudio 中创建一个 Android HelloWorld 程序:

图片4

  2. 调试手机启用开发者模式并连接 USB 选择允许调试

开启开发者模式方式以小米机型为例参考小米手机示例

  3. 运行 HelloWorld

图片5

        点击运行并在列表中选择调试的手机,确定后手机会自动安装我们的 HelloWorld 程序:

      图片6

    保持程序运行状态,我们可以在 AndroidStudio 控制台上查看程序输出的 log 日志及 CPU/内存等占用情况。

      图片7

4.HelloAndroid 程序

    使用命令行工具运行命令:

    完成目录结构:

      图片8 

    在 AndroidStudio 上打开 HelloAndroid/android 目录,等待 gradle 构建完毕后运行 HelloAndroid 程序,可以看到以下 ReactNatibe 经典报错 UI,这是因为我们还未连接上 react-native 的编译 bundle 文件而导致出现的错误页面。

      图片9 

    下面我们来运行 Android ReactNative 构建命令:

    注意这里不是使用 run-android,run-android 适用于直接在机器上运行调试 app。

      图片10

    当构建完毕,在浏览器中访问 http://localhost:8081/index.android.bundle?platform=android 可以看到我们编译好的 android bundle 文件。

调试方式

1. 配置 host 方式:

  摇晃手机调出 app debug 菜单选项 -> 选择 Dev Settings->  选择 Debug server host & port for device ->  填写 PC 局域网 IP 及端口 (命令行输入 ipconfig 可查看本机 ip)

      图片11 

  如上图,填写 192.168.1.100:8081 即可,回退到主界面,再次摇晃手机调出 app debug  菜单选项 -> 选择 Reload JS,此时可以看到 ReactNative 的应用首页:

      图片12 

2.Android5.0 以上版本命令方式:

  打开 Android SDK 目录 xxx\Android\sdk\platform-tools。在当前文件路径呼出命令行,输入:

  点击 Reload JS  即可成功拉取 ReactNative bundle。

  注意:adb 命令可以添加到 windows 全局变量中,这样无需在 xxx\Android\sdk\platform-tools 目录下执行 adb 命令,可以在 AndroidStudio 的 Terminal 命令行工具下使用

3. 模拟器调试方式

  安卓模拟器在 win 平台上性能表现不是很好,我们可以安装英特尔® 硬件加速执行管理器来进行一些性能上的提升(需要 Intel 的 CPU),安装完毕后在 AndroidStudiao 的菜单点击打开虚拟设备管理器,选择创建一个 Android 虚拟设备(需求不同的 Android 版本需要下载对应的 SDK Tool)并启动。

  当 Android 虚拟设备启动成功后,运行 HelloAndroid 应用 app,选择已启动的虚拟设备即可在虚拟设备上打开我们的 HelloAndroid。

     图片14

编写一个示例 RNA 轮播

  index.android.js  入口函数:

  首页 Demo.js:

  轮播组件函数 Slider.js:

  运行结果:

    QQ图片20160305154904

演示动画 (因篇幅关系,轮播序号圆点的代码不包含在以上代码中):

    

搭建过程遇到的问题

1. 比较常见的 MSBuild 错误

   这个错误出现的频率比较高,一般是安装与 window 环境相关的 node 包时可能会出现,比如 node-gyp 会报这个错,报错形式为:MSBUILD:error MSB3248 ...

   QQ图片20160302002242

   解决方式:

   VisualStudio2013Express  微软的 IDE(如本地环境有或更高版本则无须)

   Win7 SDKs 7.1 windows 开发工具包 (如本地环境有则无须)

   Win7:安装 VisualStadio2013 + Win7 SDKs 7.1

如 Win7 SDKs 7.1 安装失败,可以卸装电脑上的

              Visual c++ 2010 x86 redistributable 及 Visual c++ 2010 x64 redistributable 再重    试

   Win8:  安装 VisualStadio2013

2.folly::toJson 兼容错误

  在目前版本的 RNA 上遇到了这个错误,

    QQ图片20160305143713

   经过了一番调试及查找答案,发现是 alignItems: 'center' 这个样式引起的,具体参见 issue,把 alignItems 修改为 alignItems: 'stretch' 即可

 

 

1846.743

好书推荐 React Native 开发指南》

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2016/03/react-native-for-android-windows/

  1. 美图共赏 2016 年 4 月 14 日

    美图在这里:http://www.fydzv.com/

  2. liy 2016 年 4 月 10 日

    你好 ,你是用 android studio 开发 react native 的吗

    • TAT.simplehuang

      TAT.simplehuang 2016 年 5 月 12 日

      android studio 只是作为新手入门的一个调试/log 排查工具,如果需要开发 Android 侧 RN 组件,建议用 IntelliJ IDEA

  3. 用户3867941075 2016 年 3 月 17 日

    你好,博主,我在一开始不小心用了 install react-native 这个命令,后来 init 项目的时候会报错,怎样卸载啊 安装的 react-native 啊

    • TAT.simplehuang

      TAT.simplehuang 2016 年 3 月 17 日

      用 npm uninstall react-native 可以卸装

  4. 赵应龙 2016 年 3 月 14 日

    好,非常好。

  5. 狼子野心 2016 年 3 月 8 日

    搜哪儿 - [搜 索 从 这 里 开 始] , 如果喜欢请设置为首页或按 “CTRL+D“添加收藏。
    http://www.naerweb.com; http://so.naerweb.com

    搜哪儿是中国最具权威的搜索引擎大全,为用户提供方便、快捷的网页、新闻、图片、视频、音乐、购物、地图、游戏、小说、微博、词典、翻译等搜索服务。

  6. 苏茂林 2016 年 3 月 7 日

    [赞]

发表评论