【React Native开发】React Native配置运行官方例子-初学者的福音(8)

转载请标明出处:

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

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

(一)前言

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

刚创建的React Native技术交流群(282693535),欢迎各位大牛,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

我的系统是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

接着运行如下命令带起服务器,然后点击打开模拟器中的APP

./packager/packager.sh

最终运行效果如下:

上面我们完成了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),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

关注我的微博,可以获得更多精彩内容

时间: 2024-10-21 22:28:15

【React Native开发】React Native配置运行官方例子-初学者的福音(8)的相关文章

React Native 开发之 (01) 配置开发环境

一 开发条件 使用的操作系统 mac , 开发平台 IOS. 1. Homebrew Homebrew, in order to install the required NodeJS, in addition to some recommended installs. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2.Node 使用H

React.js开发的基本配置(配了两天)

记录下心酸的过程: 1.安装npm 安装node.js,这时候你就可以使用npm了. 因为官方的源下载npm的包比较慢,所以可以用淘宝的源,这时候使用nrm来进行npm源的切换 在cmd中执行 npm install -g nrm (安装nrm) nrm ls (列出来现在已经配置好的所有的原地址) nrm use taobao (切换到淘宝源) nrm ls 现在就可以愉快的用npm来下载包了 2.安装webpack (--save-dev 是你开发时候依赖的东西,--save 是你发布之后还

【转】【React Native开发】

[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组件详解(18) [React Native开发]React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17) [React Native开发]React Native控件之Switch开关与Picker选择器组件讲解以及使用(16) [React Native开发

【React Native开发】React Native For Android环境配置以及第一个实例

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50456967 本文出自:[江清清的博客] (一)前言 FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟,但是也没有阻挡了广大开发者的热情.可以这样讲在2015年移动平台市场上有两个方向技术研究比较火,第一种为阿里,百度,腾讯

【React Native开发】React Native开发IDE安装及配置

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50476350 本文出自:[江清清的博客] (一)前言 上一讲我们已经对于在OS X系统上面对于React Native For Android的环境搭建以及第一个实例做了详细讲解.所谓工欲善其事,必先利其器,做React Native开发也和其他应用开发一样,最好有一个比较好的IDE工具.那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的N

React Native开发环境配置(转)

转自:http://www.jianshu.com/p/cd2a8c5ee1c7 到如今React Native已经进化了很多版本,开发环境的配置也发生了一些改变,本文仅供参考,请按照官方指引配置,防止某些细节出入导致配置失败.官方英文版配置说明 React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:这个版本来自极客学院的翻译版,不过和官方的版本相比略有滞后,不过照着安

我的 React Native 技能树点亮计划 の React Native 开发 IDE 选型和配置

@author ASCE1885的 Github 简书 微博 CSDN 知乎 本文首发于 InfoQ 移动技术公众号:移动开发前线 由于潜在的商业目的,未经许可不开放全文转载许可,谢谢! React Native 发布一年多了,有不少公司已经在线上产品中或小范围试水,或大范围应用,很多公司或开发者都在为 React Native 的生态系统作出自己的贡献.React Native 的开发基本上是 Javascript + 系统原生开发语言(Java,Objective-C,Swift),原生语言

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watchman,flow都成功.React  Native 开发环境安装和配置 执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found 报错提示:Please include the follo