React Native官方DEMO
官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法。
运行官方DEMO步骤如下
- 安装react native环境
- React Native项目源码下载
- 下载安装cygwin软件
- 下载安装NDK然后安装以及配置
- 添加Node依赖模块:该命令行需要切到react-native项目中,主要运行如下命令
cd react-native以及npm install(这里发生错误,是因为npm需要升级的缘故) - 还需要安装配置python2版本,python3不行
- 开始编译官方实例UIExploerer项目
打开之前安装的cygwin终端,切换到当前react-native项目中。注意切换路径方法以实际项目路径为准,运行以下命令
./gradlew :Examples:UIExplorer:android:app:installDebug
需要下载很多东西,挺慢的,而且由于网络原因,经常会失败,多试几次才行 - 接下来就是最关键的一步啦~执行如下命令进行打包启动服务.
./packager/packager.sh
References
效果如下

该DEMO包含了react native主要组件与API的实例
COMPONETS
- ActivityIndicatorExample
- SliderExample
- ImageExample
- ListViewExample等
AIPS
- AccessibilityAndroidExample
- AlertExample
- AppStateExample
- BorderExample
官方Movie实例
The Movies app is a demonstration of basic concepts, such as fetching data, rendering a list of data including images, and navigating between different screens.
Running this app
Before running the app, make sure you ran:
git clone https://github.com/facebook/react-native.git
cd react-native
npm install
Running on Android
You’ll need to have all the prerequisites (SDK, NDK) for Building React Native installed.
Start an Android emulator (Genymotion is recommended).
cd react-native
./gradlew :Examples:Movies:android:app:installDebug
./packager/packager.sh
Note: Building for the first time can take a while.
Open the Movies app in your emulator.
See Running on Device in case you want to use a physical device.
effect
React Native官方DEMO的更多相关文章
- 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)
),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
- React Native八大Demo
参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水. ...
- windows下做react native官方例子遇到的问题
1.android/app/build.gradle文件中,指定了版本: compileSdkVersion 23buildToolsVersion "23.0.1" 需要在设置中 ...
- React Native 教程:001 - 如何运行官方控件示例 App
原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- React Native专题
转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
- 使用React Native来撰写跨平台的App
React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...
- 使用Visual Studio Code和typescript 开发调试React Native项目
关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...
随机推荐
- windows和linux文件共享
###Samba安装 [root@samba ~]# yum install -y samba* [root@samba ~]# rpm -qa | grep samba ###开启s ...
- JAVA设计模式 之 策略模式
一. 定义 设计模式定义了算法族,分别封装起来,让他们之间可以互相替代,此模式让算法的变化独立于使用算法的客户(该定义来自于Head First 设计模式). 二. 应用场景 当我们在应用程序中完成一 ...
- BZOJ3052——糖果公园
0.题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3052 1.题目大意:给定一颗n个点的无根树,每个点有一个颜色,要进行q次操作,有两种操 ...
- Android学习笔记(四)——再探Intent
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 我们可以使用 Intent 来启动一个活动, 还可以在启动活动的时候传递数据的,下面一起来看一下: 一.向下一 ...
- 160809209_李梦鑫_C语言程序设计实验2+选择结构程序设计_进阶
<C语言程序设计>实验报告 学 号 160809209 姓 名 李梦鑫 专业.班 计科16-2班 学 期 2016-2017 第1学期 指导教师 黄俊莲 吴喆 实验地点 C05 机 ...
- git-svn:通过git来管理svn代码
简介 svn和git都是常用的版本管理软件,但是git无论在理念或是功能上都比svn更为先进.但是有的公司是以svn作为中央仓库,这时git与svn代码的同步就可以通过 git-svn这个软件进行,从 ...
- c++写入txt文件
简单方式: #include "stdafx.h" #include <iostream> #include <iomanip> #include < ...
- MySQL 编程的6个重要的技巧
一.每一行命令都是用分号(;)作为结束 对于MySQL,第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的,但当一行MySQL被插入在PHP代码中时,最好把后面的分号省略掉,例如: 二. ...
- vs2013 内置IIS Express相关问题
问题描述,以前做的程序迁移到vs2013后出现500.22问题. HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设 ...
- iOS 小经验:UIAnimation空对象导致crash
今天调试一个老程序,发现有时运行动画会crash,仔细检查了基本的内存管理,发现都没问题!后来发现了问题,这个程序用的是下面的代码 [self performSelectorInBackground: ...