开发者社区> 微个日光日> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

windows上搭建react native环境

简介: <p style="margin-top:0px; margin-bottom:0px; padding-top:7px; padding-bottom:7px; clear:both; color:rgb(68,68,68); font-size:14px; line-height:1.8; font-family:'Helvetica Neue',Helvetica,'Lucida G
+关注继续查看

一、配置环境

1.准备相关资源

 AndroidStudio Android开发集成开发环境(推荐下载含SDK tools版)

 JDK for Windows Java Develop Kit(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'即可

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云国际版ECS云服务器Windows系统手动搭建WordPress
本教程介绍如何在Windows操作系统的ECS实例上搭建WordPress网站。-----www.123clouds.com
0 0
Windows 搭建S cala 开发环境|学习笔记
快速学习 Windows 搭建 Scala 开发环境。
0 0
Windows下搭建Dubbo+zookeeper环境
Windows下搭建Dubbo+zookeeper环境
0 0
ActiveMQ在Linux+windows环境下的搭建
ActiveMQ在Linux+windows环境下的搭建
0 0
Windows 下搭建 GO 开发环境|学习笔记
快速学习 Windows 下搭建 GO 开发环境
0 0
教你如何用家里闲置的Windows电脑搭建GPU服务器炼丹
教你如何用家里闲置的Windows电脑搭建GPU服务器炼丹
0 0
手把手教你在Windows下搭建Vue开发环境
在Windows下搭建Vue开发环境:
0 0
Windows&Linux&MacOS如何快速搭建Redis
本文主要介绍在Windows、macOS、Linux系统下,分别快速安装redis技巧。
0 0
EMQ
在 Windows 上搭建 MQTT 消息服务器
本文将以NanoMQ为例,演示如何通过安装包和源代码编译两种安装方式,在Windows系统中快速搭建一个可以支持多协议连接的物联网MQTT消息服务器。
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
ECS运维指南之Windows系统诊断
立即下载
TAKING WINDOWS 10 KERNEL
立即下载
《云服务器运维之Windows篇》
立即下载