官方给我们提供了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

windows版本编译运行react-native官方实例

效果如下

该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的更多相关文章

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

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  2. React Native八大Demo

    参考资料:http://www.cnblogs.com/shaoting/p/7148240.html 下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水. ...

  3. windows下做react native官方例子遇到的问题

    1.android/app/build.gradle文件中,指定了版本: compileSdkVersion 23buildToolsVersion "23.0.1" 需要在设置中 ...

  4. React Native 教程:001 - 如何运行官方控件示例 App

    原文发表于我的技术博客 本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置. 原文发表于我的技术博客 React ...

  5. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  6. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  7. 基于React Native的58 APP开发实践

    React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...

  8. 使用React Native来撰写跨平台的App

    React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...

  9. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

随机推荐

  1. nginx命令

    window  cmd 到nginx的文件夹 start nginx    启动命令 nginx -s reload 重新启动 nginx -s stop   关闭   linux   到 sbin ...

  2. Error: failed to fetch platform android

    在使用ionic创建项目后,需要添加平台,运行如下命令添加Android平台时: ionic platform add android 1 出现错误: Error: failed to fetch p ...

  3. javascript中数组concat()join()split()

    concat() 方法用于连接两个或多个数组. 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 所以 <script type="text/javascript" ...

  4. silk与opencore-amr音频编码对比

    silk与opencore-amr编码对比 在采样率8000 单声道 16位采样精度情况下 silk的压缩率为 1/15 opencore-amr 1/17 对比图 原始的音频编码 opencore- ...

  5. 如何发布及部署asp.net网站

    用vs开发完asp.net网站之后如何发布到服务器上去变成正式网站? 1.发布首先需要发布网站,这个步骤就是生成正式网站的目录(把源代码编译成.cs代码文件编译成.dll文件)详细步骤:http:// ...

  6. Linux--多网卡的7种Bond模式

    网卡bond是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡.在应用部署中是一种常用的技术,我们公司基本所有的项目相关服务器都做了bond,这里总结整理,以便待查. bond ...

  7. Oracle占用8080端口问题的解决

    可能在本地同时安装过Tomcat和Oracle的人都会知道,安装完Oracle后,会发现Tomcat的8080端口已经被Oracle占用了. 完全安装Oracle数据库后,当我们访问8080端口时,会 ...

  8. C# 类成员备忘

    隐藏基类的方法 调用重写或隐藏的基类方法 嵌套的类型定义 隐藏基类的方法 当从基类继承一个(非抽象)成员时,也就继承了其实现的代码,如果继承的成员是虚拟的,就可以用Overrid重写这段实现代码, 无 ...

  9. C#零碎知识汇总

    1.1取时间差 时刻:DateTime      时差:TimeSpan 代码: DateTime time1 = DateTime.Now; textBox1.Text = time1.ToStri ...

  10. 如何限制一个类只在堆上分配和栈上分配(StackOnly HeapOnly)

    [本文链接] http://www.cnblogs.com/hellogiser/p/stackonly-heaponly.html [题目] 如何限制一个类只在堆上分配和栈上分配? [代码]  C+ ...