【React Native开发】React Native配置执行官方样例-刚開始学习的人的福音(8)

转载请标明出处：

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

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

(一)前言

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

特别说明:本系列专题文章的系统环境是OS X,假设各位童鞋是Windows的话，出现执行安装等坑爹问题，还得又一次排查解决哦~俗话说学习一样新东西的时候。比如这边我们要学React Native的组件使用。那么最好的学习资料就是官方提供的材料了，作作为开发者最好的学习资料就是源代码。幸好官方给我们提供了UIExplorer项目。这里边包括React Native的基本全部组件的使用介绍和方法。以下我们来把该项目进行执行起来。只是这边仅仅临时使用到Android项目哦~ iOS的部分后期在进行解说吧。请谅解哦~

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

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

(二)执行APP工作

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 version23.0.1(build.gradle中buildToolsVersion)

③.Android Support Repository>=17

④·Andoid NDK须要安装好

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

2.3.以下開始下载NDK以及配置

①.去官网下载NDK项目(注意科学上网):http://developer.android.com/ndk/dowloads/index.html

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

我的系统是OS X，所以下载了Mac 版本号NDK了(NDK项目名:android-ndk-r10e-darwin-x86_64.bin)。

然后切换到该NDK文件所在文件夹执行例如以下命令进行改变权限以及解压缩就可以了。

chmod a+x android-ndk-r10e-darwin-x86_64.bin

接着执行解压缩命令,进行解压缩NDK

./android-ndk-r10e-darwin-x86_64.bin

2.4.react-native项目中加入local.properties文件，当中配置一下Android SDK和Android NDK的路径就可以。

我们在clone出来的react-native项目的根文件夹创建local.properties文件，文件里加入信息例如以下:

[注]以上里面的路径信息依据我本机的路径走得，实际情况还要看各位的SDK和NDK的路径。

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

cd react-native

以及

npm install

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

2.6.执行对应Demo(这边主要演示UIExplorer项目。其它项目执行方法类似)

以上的步骤大家假设已经全部走完了之后。以下执行例如以下命令进行编译安装就可以:

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

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

接着执行例如以下命令带起server,然后点击打开模拟器中的APP

./packager/packager.sh

终于执行效果例如以下:

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

上面我们完毕了react-native基础UI组件实例项目的执行,对于其它Demo。比如Movies。事实上方法差点儿相同的，大家能够測试一下，举比例如以下:

./gradlew :Examples:Movies:android:app:installDebug

(三)最后总结

今天我们主要给大家介绍了执行react-native项目中实例项目。比如UIExplorer项目。该里面包括了基本全部的组件的使用方式，并且介绍的非常具体对于刚開始学习的人来说，就是非常好的学习入门的知识，也希望大家都能部署调试起来。大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。

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

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

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

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