PHP带你从零学ReactNative开发跨平台App开发(一)

 ReactNative跨平台开发连串教程:

带您从零学ReactNative开发跨平台App开发(一)

带您从零学ReactNative开发跨平台App开发(二)

带您从零学ReactNative开发跨平台App开发(三)

带您从零学ReactNative开发跨平台App开发(四)

带您从零学ReactNative开发跨平台App开发(五)

带您从零学ReactNative开发跨平台App开发(六)

带您从零学ReactNative开发跨平台App开发(七)

style=”color: #ff0000; font-size: 18px;”>hot:更多>>

 贴一个互换群的二维码,欢迎插足:

PHP 1

 

 

 

第一自我介绍一下,本人鸟窝,现在走顿时任于xx共享汽车,担任主程,目前用的技艺栈是.net
core+angular。

前天本人讲的是关于ReactNative从零基础开发,希望得以对入门的新手,起到一个指点意义。

目前上学React
Native跨平台开发的人手相比较多,干ReactNative开发的程序员,转行过来的也正如多,此前就有遭逢过,比如:干前端的,干Android/IOS的,干后台的(C#,Go,Java…PHP),发现一个很风趣的场景,我小卖部同事干PHP的,一回偶然,我发觉她尽然学起了RN,好了,废话不多说,只是想告诉我们,RN开发App效果也无可非议。

接下去就从头了…你们准备好了吗!!!


一,首先检查环境,ReactNative(一下简称:RN)开发,必要环境。

等等,在这里自己必须强调,RN开发有三种情势,一是原生Android/IOS混合起来的开支(这种支付如今在国内,从事的可比多),二是CRNA(create
react native
app)格局开发,也就是运用脚手架生产类型模板。【国内市场对CRNA的牵线不多,我这里先简单的介绍一下CRNA
入门,后续仍然讲原生Android/IOS混合这种情势】 style=”text-decoration: line-through;”>暂时先不介绍CRNA形式开发,等国内市场成熟再说不迟。

工具准备:

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

PHP 2

 

2,安装包下载之后,双击举办安装

win平台的校友注意,安装过程中要关张杀毒软件和各样安全工具

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

$ node -v

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

PHP 3

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

npm 是Node包管理工具,之后需要利用它来设置任何node程序包

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

$ npm -v

该命令执行结果为:

3.10.10

Yarn

Yarn是非死不可出品的一个依赖包管理工具,起效果和npm一样。但Yarn具有更多好用的特点:

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

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

  • Yarn 使用一个格式详尽但简单的 lockfile
    和一个准确无误的算法来安装,能够确保在一个类别上的周转的装置过程也会以相同的主意运行在另外系统上

  • 网络适应单个请求失利不会造成安装失利,请求失利时会重试

安装yarn

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

使用Yarn

设置好将来,其他工具会自动使用Yarn举办加速。

理所当然安装在此之前,你可以先检查一下,你协调是不是已经安装过Yarn,假使出现下图的形式,说明已经设置过了。

PHP 4

yarn -v 看一下当前版本

PHP 5

设置create-react-native-app命令行工具

create-react-native-app是一个概括创制ReactNative工程,并且不需要安排的工具,它极大的简化了入门开发的流水线。具体的内容,我们可以进来其github.com的主页举办浏览

安装create-react-native-app需要采纳npm举行,在随机目录下,输入如下命令,便可以在该目录下创办一个ReactNative工程。

留意,假若没有设置crna命令行工具以来,直接运行该命令会报那样的错:

PHP 6

故此我们要先安装命令行工具,也叫脚手架。

是因为npm
服务器在境外,加上网速慢的来由,这个加载起来会很满,大家稍安勿燥。

PHP 7

如图所示,安装完成,我前天网速好像有些快呀,安装了30s。

创建ReactNative工程

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

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

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

$ create-react-native-app myapp

PHP,myapp为工程名,可以转移为另外字符,但必须小写

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

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

PHP 8

PHP 9

 

其一进程相比较  style=”font-size: 18px; color: #ff0000;”>漫长 
是真的长久啊,我等了有10分种。这些历程你不要疑神疑鬼时间,真的是如此的。

若是在这多少个过程中,你等的急性,可以先下载我们的画龙点睛工具:1.模拟器,那里我推荐夜神模拟器。2.Expo
,这是一个可以从来装在二哥大上仍旧模拟器里,用来测试项目用的。

模拟器都会安装吧,安装好模拟器,我们安排一下参数:

PHP 10

PHP 11

为了削减大家的内存开销,大家把配置调的低一些。内存大的土豪无所谓!

 

运转预览工程

1,工程创造完成未来,便可以启动工程,先导开发和调节。

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

PHP 12

 

$ yarn start

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

 

 PHP 13

 

 这就是象征着您的门类曾经跑起来了,怎么样看效果呢?这就看英文字符,提醒:想预览你的app加载出来是哪些吊样,那么就用 style=”font-size: 18px; color: #ff6600;”>expo
app的扫码工具扫一扫吧,你就可以瞥见你的类型运行起来是何等吊样了!

expo是什么,咋样找到expo并安装expo呢?去expo官网 https://expo.io 
好多个人反应官网上下载expo有问题,并且也有人加我找我要,那里即便你们有题目的话,可以一贯访问下边我付出的expo下载链接,直接下载!

PHP 14

 

PHP 15

 

按 a 打开该品种在android 或 模拟器上支出设备上

按 q 显示二维码

按 r 重新加载资源包 

按R 重新加载资源包,并通晓缓存

好了,下面我给大家提供一些资料:

2,启动工程将来,需要在手机端安装Expo App,使用Expo
App对所付出的ReactNative App举行预览运行。

安装ExpoApp的措施如下:

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

PHP 16

 

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

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

PHP 17

 

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

PHP 18

注意:expo上看您付出的app效果有三种途径:1.手机上从来扫码就足以了
2.复制exp://xxxx.xx.xx.xx这些链接,到project上收索该地点,可以观察项目,如图

PHP 19

PHP 20

 

在IDE中编辑代码,查看效果!

熟话说,工欲善其事,必先利其器,这里自己引进我们用 vs
code编辑器敲代码,效果是老大爽的!

PHP 21

 

找到我们刚刚创设的序列,有vs code打开它,并且编写代码!

PHP 22

 在自家修改了内容之后,app的内容也时有暴发了变化!

 PHP 23

 

用vs
code写rn的话,我在举荐我们安装多少个插件,安装插件的目标是为了更加急速的支付

PHP 24

 

 


 

 

 好了,到这一步,大家的app固然是跑起来了,如果您耐心的和本人学到了这边,那么恭喜您,你很牛逼,因为自己第一搞这多少个的时候,搞了两天,仍然一脸蒙蔽!

后续随笔频频立异,敬请期待!

style=”font-size: 18px; color: #ff0000;”>著作为作者原创,转载请注解出处。

 

相关文章