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

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

这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/493981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

牛津教授揭秘AI革命及其前沿进展

来源:专知导读:2018年9月9日-14日,DeepMind主办的Deep Learning Indaba 2018大会在南非斯泰伦博斯举行。会上,牛津大学教授Nando de Freitas和其他15位专家做了《深度学习:AI革命及其前沿进展》的报告。报告导读&#…

【will】JS去字符串首尾空格

当IE不支持Jquery的Trim()方法时, 就需要JS的方法: function mytrim(str){return str.replace(/^\s|\s$/g,"");}转载于:https://www.cnblogs.com/EMTeam/p/3181471.html

数据结构之DFS与BFS实现

本文主要包括以下内容 邻接矩阵实现无向图的BFS与DFS 邻接表实现无向图的BFS与DFS 理论介绍 深度优先搜索介绍 图的深度优先搜索(Depth First Search),和树的先序遍历比较类似。 它的思想:假设初始状态是图中所有顶点均未被访问,则从某…

一图分析华为最新AI生态与未来趋势

华为全联接大会2018年10月10日在上海召开,作为面向ICT产业的年度大会,华为公布了重要AI战略,将华为AI发展战略概括为以下五大方向:强力投资基础研究、打造全栈解决方案、投资开放生态和人才培养、解决方案增强以及内部效率提升。华…

SQL SERVER 与ACCESS、EXCEL的数据导入导出转换

* 说明&#xff1a;复制表(只复制结构,源表名&#xff1a;a 新表名&#xff1a;b) select * into b from a where 1<>1* 说明&#xff1a;拷贝表(拷贝数据,源表名&#xff1a;a 目标表名&#xff1a;b) insert into b(a, b, c) select d,e,f from b;* 说明&am…

数据结构之Dijkstra算法

基本思想 通过Dijkstra计算图G中的最短路径时&#xff0c;需要指定起点s(即从顶点s开始计算)。 此外&#xff0c;引进两个集合S和U。S的作用是记录已求出最短路径的顶点(以及相应的最短路径长度)&#xff0c;而U则是记录还未求出最短路径的顶点(以及该顶点到起点s的距离)。 …

在读博士的第八年,她破解了量子计算领域最基本的问题之一

来源&#xff1a;原理Urmila Mahadev&#xff08;厄米拉马哈德夫&#xff09;花了八年时间在研究生院解决了量子计算领域最基本的问题之一&#xff1a;怎么知道量子计算机是否做了量子计算呢&#xff1f;2017年春天&#xff0c;Urmila Mahadev发现自己处于大多数研究生都会认为…

页面加载完时再动态添加脚步

//页面加载时不存在&#xff0c;加载完时再添加 function loadScript(url) {//外部文件var script document.createElement("script");script.type "text/javascript";script.src url;document.body.appendChild(script); }function loadScriptString(c…

React Native实例之房产搜索APP

React Native 开发越来越火了&#xff0c;web app也是未来的潮流, 现在react native已经可以完成一些最基本的功能. 通过开发一些简单的应用, 可以更加熟练的掌握 RN 的知识. 在学习的过程&#xff0c;发现了一个房产搜索APP的实例&#xff0c;但只有ios版本&#xff0c; 本文…

“间谍芯片”疑云:谁在撒谎?警示何在?

芯片级安全没有终点来演&#xff1a;科学网摘要&#xff1a;10月5日起&#xff0c;一则“苹果、亚马逊被卷入&#xff0c;中国黑客利用微芯片入侵美国”的消息不胫而走&#xff0c;消息所波及的中美科技企业的股价应声下跌。10月5日起&#xff0c;一则“苹果、亚马逊被卷入&…

Extjs4前端开发代码规范参考

准则&#xff1a; 一致性&#xff0c; 隔离与统一管理&#xff0c; 螺旋式重构改进&#xff0c; 消除重复&#xff0c; 借鉴现有方案 1. 保证系统实现的一致性&#xff0c;寻求一致性方案&#xff0c; 相同或相似功能尽量用统一模式处理&#xff1b; 2. 尽可能使用隔离技…

数据结构之最小生成树

prime算法 普里姆(Prim)算法&#xff0c;是用来求加权连通图的最小生成树的算法。 基本思想 对于图G而言&#xff0c;V是所有顶点的集合&#xff1b;现在&#xff0c;设置两个新的集合U和T&#xff0c;其中U用于存放G的最小生成树中的顶点&#xff0c;T存放G的最小生成树中…

打造无所不及的智能:徐直军发布华为AI战略及全栈全场景方案

来源&#xff1a;C114通信网摘要&#xff1a;选择正确的问题比寻找新奇的方案更重要。“这是一个伟大的时代&#xff0c;华为立志为推动人类进步和世界繁荣做出贡献。2017年底&#xff0c;我们提出了新的愿景和使命&#xff0c;‘把数字世界带入每个人、每个家庭、每个组织&…

同步博客到CSDN

经过一些朋友的多次邀请&#xff0c;现同步博客到CSDN&#xff0c;地址:http://blog.csdn.net/knightswarrior。 转载于:https://www.cnblogs.com/KnightsWarrior/p/BackupToCSDN.html

四超多强 一文看懂中国CV独角兽格局

来源&#xff1a;网易智能通过短短两三年的攻城略地&#xff0c;中国CV&#xff08;Computer Vision&#xff0c;计算机视觉&#xff09;行业形成“四超多强”的格局。商汤、云从、依图、旷视还被称为“四小龙”&#xff0c;他们之间的故事由来已久&#xff0c;谈及最多的当属他…

数据结构之拓扑排序

拓扑排序介绍 拓扑排序(Topological Order)是指&#xff0c;将一个有向无环图(Directed Acyclic Graph简称DAG)进行排序进而得到一个有序的线性序列。 这样说&#xff0c;可能理解起来比较抽象。下面通过简单的例子进行说明&#xff01; 例如&#xff0c;一个项目包括A、B、…

http://www.shengshiyouxi.com

android从Linux系统启动有4个步骤&#xff1b; (1) init进程启动 (2) Native服务启动 (3) System Server&#xff0c;Android服务启动 (4) Home启动 总体启动框架图如&#xff1a; 第一步&#xff1a;initial进程(system\core\init) init进程&…

清华 Aminer 发布最新2018人脸识别研究报告

来源&#xff1a;专知AMiner平台由清华大学计算机系研发&#xff0c;拥有我国完全自主知识产权。平台包含了超过2.3亿学术论文/专利和1.36亿学者的科技图谱&#xff0c;提供学者评价、专家发现、智能指派、学术地图等科技情报专业化服务。 今日&#xff0c;该平台发布最新的201…

数据结构之字典序全排列

字典序法中&#xff0c;对于数字1、2、3……n的排列&#xff0c;不同排列的先后关系是从左到右逐个比较对应的数字的先后来决定的。例如对于5个数字的排列 12354和12345&#xff0c;排列12345在前&#xff0c;排列12354在后。按照这样的规定&#xff0c;5个数字的所有的排列中最…

敏捷实践:比每日会议更疯狂的半日会议!

由“每周例会”说起 每天项目例会的话&#xff0c;频率太高了&#xff0c;可能会浪费时间&#xff0c;如果每月一次&#xff0c;似乎时间太长了&#xff0c;于是我们往往会“每周例会”。 有一次我参加了某项目的每周例会&#xff0c;开会的时间是周五&#xff0c;会上其中一位…