官方给我们提供了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. React Native 学习资源精选仓库

    <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...

  2. React Native 学习资源精选仓库(汇聚知识,分享精华)

    React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...

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

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

  4. 大咖说:React Native 全埋点实现原理(内附赠书)

    本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...

  5. 移动开发者如何更好地学习 React Native? | 技术头条

    作者 | 魔笛 责编 | 郭芮 2015年3月,Facebook正式发布react-native,只支持iOS平台:2015年9月,Facebook发布了React Native for Androi ...

  6. 2.React Native Flex布局介绍以及实践

    好久没有写博客,一直在用自己的印象笔记记录一些问题.2017年了,想重新的把博客写起来.也希望通过这个平台交一些朋友. 没有具体的介绍基本的语法,主要是说明了与标准的CSS Flex的一些区别以及一个 ...

  7. React Native Android 从学车到补胎和成功发车经历

    [工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准 ...

  8. android开发rn插件,在Android原生应用中嵌入React Native

    开发工具:Android Studio , WebStorm 参考链接:React Native官方中文文档 一.创建React Native项目 1.在本地React Native项目目录下,创建一 ...

  9. iOS开发者React Native学习路线

    2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...

最新文章

  1. Scrapy爬虫及案例剖析
  2. Python中的eval(),exec()以及其相关函数
  3. Linux命令04:info
  4. bugku——分析(流量分析)题解
  5. 字节跳动---万万没想到之抓捕孔连顺
  6. stm32的语音识别_基于stm32循迹避障语音控制金属探测蓝牙小车设计(原理图+pcb+源码+参考文档)...
  7. php 高德地图计算距离,距离、长度、面积
  8. OpenCV文档阅读笔记-inRange官方解析及实例
  9. 结对作业_core组
  10. 【专题5: 硬件设计】 之 【62.案例四:简易空气净化器,完整原理图】
  11. 霍尼韦尔为重庆打造智慧口岸提供技术支持
  12. 自动驾驶数据之争,走向合规
  13. 微信加不了公众号服务器繁忙,微信公众号系统繁忙是怎么回事
  14. /opt/hbase/conf 中不能启动hbase_北京现代伊兰特不能启动
  15. excel 外部链接 乱码_在Excel文件中查找外部链接
  16. Learning to Memorize Entailment and Discourse Relations for Persona-Consistent Dialogues论文学习
  17. 分享几个IP获取地理位置的API
  18. 最全的DevOps工具集合,再也不怕选型了!
  19. 带薪“看片”?继阿里后微信也公开招聘“鉴黄师”!
  20. 育碧Web实习笔试题分享

热门文章

  1. 谷歌大改Transformer注意力,速度大涨,显存大降!
  2. 论文浅尝 | 基于图卷积网络的跨语言图谱实体对齐
  3. (摘要)新基建风口下,今年工业互联网平台将呈现十大新特征
  4. 【JavaWeb】XML和Jsoup的相关内容
  5. Meta开发了一个AI模型,尝试解决维基百科的「性别偏见」问题
  6. IO模型(epoll)--详解-02
  7. 弄懂goroutine调度原理
  8. ASP.NET MVC教程六:两个配置文件详解
  9. java 双因素认证(2FA)TOTP demo
  10. ajax之深入解析(2)