超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50661981

本文出自:【江清清的博客】

(一)前言

【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org

特别说明:群里非常多童鞋都在说想Windows系统官方实例。可是官方提供的文档以及网上的样例都是OS X版本号。今天特意给大家更新一下Windows版本号执行官方 实例(UIExporler)全过程。

俗话说学习一样新东西的时候，比如这边我们要学React Native的组件使用，那么最好的学习资料就是官方提供的材料了。作作为开发者最好的学习资料就是源代码。幸好官方给我们提供了UIExplorer项目，这里边包括React Native的基本所有组件的使用介绍和方法。以下我们来把该项目进行执行起来。只是这边仅仅临时使用到Android项目哦~ iOS的部分后期在进行解说吧。请谅解哦~

刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758)。请不要反复加群！

欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

关于React Native各种疑难杂症,问题深坑总结方案请点击查看:

Mac OS X版本号编译执行官方实例请点击查看:

(二)执行APP工作

【注意】本文章的前置条件。须要你Windows环境正确安装了React Native环境:点击进入Windows系统安装配置React Native教程。

2.1.React Native项目源代码下载

React Native项目官方地址:https://github.com/facebook/react-native 我们能够使用例如以下命令把代码clone到本地。

git clone https://github.com/facebook/react-native.git

详细项目结构例如以下:

2.2.Android环境要求例如以下。请确保你的环境已经达到例如以下要求:

• ①.Android Sdk版本号23(在build.gradle中的compileSdkVersion)
• ②.SDK build tools version 23.0.1(build.gradle中buildToolsVersion)
• ③.Android Support Repository>=17
• ④·Andoid NDK须要安装以及配置
• ⑤·Cygwin安装

[注]以上第①点到第③点的版本号不须要和我这边一样。能够依据实际情况走。只是最好是最新版本号哦~

2.3.下载安装cygwin软件

依据官方提供的文档我们须要执行相似于./packager/packager.sh这种shell脚本，普通的Windows系统是无法执行这种脚本的。

所以我们的Windows系统能够下载安装cygwin之后就能够执行shell脚本啦。下载地址:https://www.cygwin.com/去下载相应的版本号就可以了。

下载完毕開始安装:

选择从网络(Internet)进行安装，点击下一步:

安装路径尽量採用英文(不要中文),然后默认选择下一步就可以了.

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

选择下载的镜像:

这一步，我们选择须要下载安装的组件包，为了使我们安装的Cygwin能够编译程序，我们须要安装gcc编译 器，默认情况下。gcc并不会被安装，我们须要选中它来安装。为了安装gcc，我们用鼠标点开组件列表中的“Devel”分支，在该分支下，有非常多组件。 我们必须的是：

1. binutils
2. gcc
3. gcc-mingw
4. gdb

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

须要安装的组件选择完毕之后開始下一步组件安装啦~

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

终于安装组件完毕

以下我们在系统环境变量PATH中加入我们cygwin的bin文件夹这样我们就能够通过命令行界面直接使用bash进入cygwin环境啦~

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

配置完毕之后，重新启动命令行终端。然后敲入bash命令进入例如以下界面，就代表OK了

2.4.下载安装NDK然后安装以及配置

由于官方的实例是须要进行安装配置NDK的，所以大家须要去官方站点进行下载(请注意科学上网)http://developer.android.com/ndk/dowloads/index.html  大家下载自己系统相应的版本号就可以。下载成功之后解压缩。然后环境变量创建ANDROID_NDK配置一下就可以

2.5.加入Node依赖模块:该命令行须要切到react-native项目中,主要执行例如以下命令

cd react-native

?

以及

?

npm install

这样就加入了node_modules模块(当中包括了react-native核心库)

突然执行发现错误了:

这个是npm的版本号问题。该npm2的版本号不支持windows系统，所以我们须要进行升级。

首先通过npm version查看当前的版本号,然后升级到指定版本号(npm升级方法点击进入)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

升级成功例如以下:

然后复制C:\Users\{你的Windowsusername}\AppData\Roaming\npm\node_modules\npm下的文件到你的 NodeJS安装文件夹下的 \node_modules\npm 中，覆盖掉原有的所有文件；

接下来又一次在刚刚react-native中执行npm install命令就可以.

有预感的还是出现错误啦!

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

出现错误发现我们电脑没有安装python模块，有些童鞋这个错误可能不会出现的~那我们继续開始安装python模块吧。

下载地址:https://www.python.org/downloads/release/python-278/

大家依据自己的电脑系统以及版本号进行下载安装吧

【特别注意】python版本号请选择2.5-3.0之间的版本号哦~

下载安装配置一下环境变量就可以

然后打开命令行执行python,看到例如以下信息就安装成功python了

上面这些支持项已经所有安装了，下载切换到rect-native项目又一次执行npm install開始加入mode模块吧

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

2.6.開始编译官方实例UIExploerer项目

打开之前安装的cygwin终端，切换到当前react-native项目中。

注意切换路径方法以实际项目路径为准

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

执行例如以下命令開始编译安装我们的官方实例

./gradlew :Example:UIExplorer:android:app:installDebug

?

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

这边花的时间要看网络情况的，有时候速度会非常慢。等大家耐心等待~

接下来就是最关键的一步啦~执行例如以下命令进行打包启动服务.

./packager/packager.sh

OK这样我的服务已经启动起来。大家仅仅须要去设备中点击打开APP就可以

最后我们来看一下官方实例UIExplorer的执行效果

(三)最后总结

今天主要给大家演示一下Windows版本号编译执行React Native官方实例UIExplorer项目，至于其它几个实例仅仅要把命令改一下就可以了，各位童鞋举一反三吧。

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博，能够获得很多其它精彩内容

s=6uyXnP" style="color: rgb(202, 0, 0); text-decoration: none;">