ReactNative开发环境

此内容根据徐赢老师的文档整理后写处

原版地址:https://tuomaxu.gitbooks.io/reactnative/content/

 

 

ReactNative是跨平开发的解决方案,在开发平台的选择上,mac平台和win平台都可以。

所需要工具如下:

1,Nodejs环境

2,create-react-native-app

3,Expo App

4,iPhone和安卓手机,或安卓手机模拟器(推荐使用夜神模拟器)

以上工具均有mac和win平台的安装包。

笔者使用的是mac平台做开发,所有下面演示都以mac平台进行。

 

 

安装Nodejs环境

1,进入http://nodejs.cnnodejs中文网,下载与自身环境相一致的nodejs安装包

2,安装包下载之后,双击进行安装

win平台的同学注意,安装过程中要关闭杀毒软件和各种安全工具

3,安装完成之后,打开命令行工具,检查是否安装成功,执行如下命令:

$ node -v

该命令执行结果为当前node版本,笔者当前版本为:

v6.9.1

4,检查NPM是否安装成功,

npm 是Node包管理工具,之后需要使用它来安装其他node程序包

在在命令行中输入如下命令:

$ npm -v

该命令执行结果为:

4.5.0

 

 

安装Yarn

Yarn是Facebook出品的一个依赖包管理工具,起作用和npm一样。但Yarn具有更多好用的特性:

  • Yarn 会缓存它下载的每个包,所以不需要重复下载。它还能并行化操作以最大化资源利用率,所以安装速度之快前所未有

  • Yarn 在每个安装包的代码执行前使用校验码验证包的完整性。

  • Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上

  • 网络适应单个请求失败不会导致安装失败,请求失败时会重试。

安装yarn

访问Yarn官网,下载响应平台的安装包,进行安装

使用Yarn

安装好之后,其他工具会自动使用Yarn进行加速。

 

安装create-react-native-app命令行工具

create-react-native-app是一个综合创建ReactNative工程,并且不需要配置的工具,它极大的简化了入门开发的流程。具体的内容,大家可以进入其github.com的主页进行浏览。

安装create-react-native-app需要使用npm进行,在任意目录下,输入如下命令,便可以在该目录下创建一个ReactNative工程。

$ npm install -g create-react-native-app

安装成功之后,会展示安装路径。如安装不成功,请检查网络,重新安装。

 

创建ReactNative工程

ReactNative工程的模板需要通过create-react-native-app工具进行创建。创建方法如下:

1,通过命令行进入存放ReactNative工程的文件夹。

2,在该文件夹下执行如下命令:

$ create-react-native-app myapp

myapp为工程名,可以更换为其他字符,但必须小写

安装过程需要1-5分钟不等,如想提升安装速度,可以安装yarn,详情见yarn官网

下面为笔者安装成功截图:

笔者使用了yarn进行提速,所有命令中显示为yarn

 

 

运行预览工程

1,工程创建完成之后,便可以启动工程,开始开发和调试。

启动工程,首先要使用命令行工具进入工程更目录,然后运行如下指令

$ npm start

工程 启动之后,会生成一个二维码和一个本地链接,通过此此二维码或本地链接,便可预览工程运行效果。

2,启动工程之后,需要在手机端安装Expo App,使用Expo App对所开发的ReactNative App进行预览运行。

安装ExpoApp的方法如下:

iOS平台:在AppStore中搜索Expo client,如图

Android平台下,访问此链接:http://expo.io/--/api/v2/versions/download-android-apk 下载安装包并安装,安装过程中需要给此App全部权限。

3,Expo App在手机端安装完成之后,打开ExpoApp,通过其扫描二维码的功能,扫描生成的二维码,便可以在App内预览开发中的App工程

4,新建工程的运行效果为:

转载于:https://www.cnblogs.com/sunny-pei666/p/7235989.html

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

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

相关文章

Python自动化开发 - 字符串, 列表, 元组, 字典和和文件操作

一、字符串特性:字符串本身不可修改,除非字符串变量重新赋值。Python3中所有字符串都是Unicode字符串,支持中文。 >>> name "Jonathan" >>> name "Jonathan" "Ni" >>>print(na…

shiro java配置,InI 配置 - 跟我学 Apache Shiro_教程_Java开发社区

INI 配置之前章节我们已经接触过一些 INI 配置规则了,如果大家使用过如 Spring 之类的 IoC/DI 容器的话,Shiro 提供的 INI 配置也是非常类似的,即可以理解为是一个 IoC/DI 容器,但是区别在于它从一个根对象 securityManager 开始。…

在Spring容器外部连接对象依赖项

有几种有趣的方法可以设置在Spring容器外部实例化的对象的属性和依赖关系。 用例首先,为什么我们需要在Spring容器之外进行依赖注入–我知道三个用例,其中我实例化了Spring容器之外的对象并需要注入依赖。 首先考虑使用Spring TaskExecutor执行一系列任…

前端学习路线汇总

https://123.w3cschool.cn/plk2fihttps://www.w3cschool.cn/nodejs/nodejs-global-object.htmlnode.js转载于:https://www.cnblogs.com/sxz2008/p/7238773.html

MediaInfo源代码分析 1:整体结构

博客地址:http://blog.csdn.net/leixiaohua1020/article/details/12016231 MediaInfo源代码分析系列文章列表: MediaInfo源代码分析 1:整体结构MediaInfo源代码分析 2:API函数MediaInfo源代码分析 3:Open()函数MediaI…

测试RESTful服务的客户端

开发使用RESTful Web API的应用程序可能意味着开发服务器和客户端。 为服务器端编写集成测试可以像使用Arquillian来启动服务器一样容易,并且可以通过REST确保测试服务是否按预期工作。 问题是如何测试客户端。 在本文中,我们将了解如何使用模拟来测试客…

linux mysql误删,linux下MySQL安装与删除 (Ubuntu)

1、MySQL安装A)MySQL安装: sudo apt-get install mysql-server mysql-clientB)启动/停止MySQL服务:MySQL 在安装以后,MySQL 就已经启动;如果需要手动启动或停止则如下操作:手动启动服务: sudo start mysql手…

对多态的理解例子

public class A {public String show(D obj) {return ("A and D");}public String show(A obj) {return ("A and A");} }class B extends A{public String show(B obj){ //重载return ("B and B");}public String show(A obj){ //重写show(A obj…

【Java每日一题】20170120

20170119问题解析请点击今日问题下方的“【Java每日一题】20170120”查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; import java.util.Arrays; import java.util.List; public class Ques0120 { publ…

使用NoSQL实现实体服务–第2部分:合同优先

现在该开始使用NoSQL项目对SOA实体服务进行编码了,并且正如我所承诺的,我将从Web服务的合同开始。 看一下本系列的第1部分 。 这种从Web服务合同定义开始的技术是面向服务的体系结构实现的“合同优先”方法的核心,并具有许多技术优势&#xf…

php hugepage,【原创】解决Redis启动报错:Transparent Huge Pages (THP) support enabled in your kernel...

问题背景Redis启动报错:WARNING you have Transparent Huge Pages (THP) support enabled in your kernel.This will create latency and memory usage issues with Redis.To fix this issue run the command echo never > /sys/kernel/mm/transparent_hugepage/…

hibernate cascade的真正含义

hibernate cascade 是 OneToOne OneToMany ManyToOne ManyToMany等注解的属性&#xff0c;表示级联操作。 /*** (Optional) The operations that must be cascaded to* the target of the association.** <p> By default no operations are cascaded.*/CascadeType[] cas…

射线碰撞检测

在我们的游戏开发过程中&#xff0c;有一个很重要的工作就是进行碰撞检测。例如在射击游戏中子弹是否击中敌人&#xff0c;在RPG游戏中是否捡到装备等等。在进行碰撞检测时&#xff0c;我们最常用的工具就是射线&#xff0c;Unity 3D的物理引擎也为我们提供了射线类以及相关的函…

高级ZK:异步UI更新和后台处理–第1部分

异步UI更新非常有用&#xff0c;因为它们通常可以提高响应性&#xff0c;可用性和用户界面的总体感觉。 我将在这里重点介绍ZK框架&#xff0c;但是通常&#xff0c;相同的原理也适用于桌面UI&#xff08;Swing&#xff0c;SWT&#xff09;。 长时间运行的处理 有时&#xff0…

php注册登录遍写入 遍验证,自动注册登录验证机制的php代码

在phpwind站点后台添加“广告管家”(CNZZ的一款广告投放的应用)的应用&#xff0c;整个“广告管家”通过iframe载入&#xff0c;载入的具体内容根据不同站点显示针对该站点的具体内容。出于意用性方面的考虑&#xff0c;需要以下二点&#xff1a;1、首次进入“广告管家”页面自…

转载:tensorflow保存训练后的模型

训练完一个模型后&#xff0c;为了以后重复使用&#xff0c;通常我们需要对模型的结果进行保存。如果用Tensorflow去实现神经网络&#xff0c;所要保存的就是神经网络中的各项权重值。建议可以使用Saver类保存和加载模型的结果。 1、使用tf.train.Saver.save()方法保存模型 tf.…

php url传递变量,php – 在laravel中通过url传递变量

我是laravel的新手,我正在努力让我的网址格式正确.格式为http://mysite/blog?category1 instead of http://mysite/blog/category1这些是我正在使用的文件,有没有办法将路由放入BlogControllerRoute.phpRoute::get(blog/{category}, function($category null){// get all the…

Apache Wicket:记住我的功能

在Web应用程序中&#xff0c;具有“记住我”功能非常普遍&#xff0c;该功能使用户每次访问我们的网站时都能自动登录。 可以使用Spring Security来实现这种功能&#xff0c;但我认为将基于请求的身份验证框架与基于组件的Web框架结合使用并不是最好的主意。 这两个世界不能很好…

Ubuntu 安装中文

系统环境&#xff1a; 1. 官网 http://pinyin.sogou.com/linux/ 下载安装包。 2. 先运行 apt-get update 。 3. 再运行 apt-get -f install 。 4. 再运行 可能有的UBuntu系统自带了。 5. 如果下载的搜狐输入法安装包的格式为 .deb 的&#xff0c; 运行 &#xff1a; dpk…

Eigen教程(10)

整理下Eigen库的教程&#xff0c;参考&#xff1a;http://eigen.tuxfamily.org/dox/index.html 混淆 在Eigen中&#xff0c;当变量同时出现在左值和右值&#xff0c;赋值操作可能会带来混淆问题。这一篇将解释什么是混淆&#xff0c;什么时候是有害的&#xff0c;怎么使用做。 …