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

 ReactNative跨平台支付类别教程:

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

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

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

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

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

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

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

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

 贴七个交换群的二维码,欢迎加入:

图片 1

 

 

 

先是自我介绍一下,自身鸟窝,未来新任于xx共享小车,担任主程,方今用的技能栈是.net
core+angular。

明天自身讲的是关于ReactNative从零基础开发,希望得以对入门的新手,起到二个带领意义。

当前攻读React
Native跨平台支付的人手相比多,干ReactNative开发的程序员,转行过来的也正如多,在此以前就有遇上过,比如:干前端的,干Android/IOS的,干后台的(C#,Go,Java…PHP),发现1个很风趣的现象,笔者公司同事干PHP的,二遍偶然,小编发觉他尽然学起了CR-VN,好了,废话不多说,只是想告诉我们,奇骏N开发App效果也不利。

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


一,首先检查环境,ReactNative(一下简称:CRUISERN)开发,供给环境。

等等,在那里作者无法不强调,奥迪Q5N开发有二种方式,一是原生Android/IOS混合起来的开发(那种支付近日在境内,从事的可比多),二是CXC90NA(create
react native
app)形式开发,也正是采纳脚手架生产品种模板。【国内市集对C大切诺基NA的介绍不多,作者那边先简单的牵线一下CPRADONA
入门,后续依旧讲原生Android/IOS混合那种方式】 style=”text-decoration: line-through;”>暂且先不介绍C福睿斯NA形式开发,等国内商场成熟再说不迟。

工具准备:

1,进入http://nodejs.cnnodejs粤语网,下载与自小编环境相一致的nodejs安装包

图片 2

 

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

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

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

$ node -v

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

图片 3

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

npm 是Node包管理工科具,之后要求选拔它来设置任何node程序包

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

$ npm -v

该命令执行结果为:

3.10.10

Yarn

Yarn是Instagram出品的1个依靠包管理工科具,起效果和npm一样。但Yarn具有越来越多好用的特征:

  • Yarn
    会缓存它下载的每一个包,所以不需求再一次下载。它仍是能够并行化操作以最大化财富利用率,所以安装速度之快前所未有

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

  • Yarn 使用八个格式详尽但不难的 lockfile
    和2个精确的算法来设置,能够保障在多个系统上的运维的装置进度也会以同等的章程运转在任何系统上

  • 网络适应单个请求战败不会招致安装退步,请求战败时会重试

安装yarn

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

使用Yarn

安装好现在,其余工具会自动使用Yarn举办加快。

本来安装在此之前,你能够先检查一下,你本身是不是已经安装过Yarn,假若出现下图的方式,表明已经设置过了。

图片 4

yarn -v 看一下当前版本

图片 5

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

create-react-native-app是二个综合创设ReactNative工程,并且不必要配备的工具,它相当大的简化了入门开发的流程。具体的内容,大家能够进入其github.com的主页进行浏览

设置create-react-native-app须求拔取npm实行,在任意目录下,输入如下命令,便得以在该目录下创办三个ReactNative工程。

注意,假设没有设置crna命令行工具以来,间接运转该命令会报这样的错:

图片 6

因而大家要先安装命令行工具,也叫脚手架。

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

图片 7

如图所示,安装到位,小编今日网速好像有点快啊,安装了30s。

创建ReactNative工程

ReactNative工程的沙盘须要经过create-react-native-app工具进行创办。创立方法如下:

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

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

$ create-react-native-app myapp

myapp为工程名,能够转换为别的字符,但不能够十分大写

设置进度供给1-4分钟不等,如想提高安装速度,能够安装yarn,详情见yarn官网

上边为小编安装成功截图:

图片 8

图片 9

 

其一进度比较  style=”font-size: 18px; color: #ff0000;”>漫长 
是真的深刻啊,小编等了有拾壹分种。那些进程你不用狐疑时间,真的是这般的。

要是在那一个历程中,你等的躁动,能够先下载大家的要求工具:1.模拟器,那里小编引进夜神模拟器。2.Expo
,那是3个足以间接装在手提式有线电话机上恐怕模拟器里,用来测试项目用的。

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

图片 10

图片 11

为了裁减大家的内部存款和储蓄器耗费,大家把配置调的低一些。内部存储器大的土豪无所谓!

 

运营预览工程

1,工程创设实现之后,便得以运营工程,初阶支付和调节。

起步工程,首先要利用命令行工具进入工程更目录,然后运转如下指令

图片 12

 

$ yarn start

工程
运营之后,会转变二个二维码和多个本土链接,通过此此二维码或当地链接,便可预览工程运营效果。

 

 图片 13

 

 那便是象征着你的品种早就跑起来了,怎么样看功用啊?这就看英文字符,提醒:想预览你的app加载出来是什么样吊样,那么就用 style=”font-size: 18px; color: #ff6600;”>expo
app的扫码工具扫一扫吧,你就足以望见你的项目周转起来是怎样吊样了!

expo是什么样,如何找到expo并安装expo呢?去expo官网 https://expo.io 
好三人反应官网上下载expo不正常,并且也有人加作者找作者要,那里假如你们极度来说,能够一向访问下边笔者付诸的expo下载链接,直接下载!

图片 14

 

图片 15

 

按 a 打开该类型在android 或 模拟器上支付设备上

按 q 突显二维码

按 r 重新加载财富包 

按Rubicon 重新加载财富包,并知道缓存

好了,上边笔者给我们提供一些资料:

2,运行工程以往,需求在手提式有线电话机端安装Expo App,使用Expo
App对所付出的ReactNative App举行预览运维。

安装ExpoApp的不二法门如下:

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

图片 16

 

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

3,Expo
App在手提式有线电话机端安装完毕未来,打开ExpoApp,通过其扫描二维码的效果,扫描生成的二维码,便能够在App内预览开发中的App工程

图片 17

 

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

图片 18

留意:expo上看您付出的app效果有二种途径:1.手提式有线话机上间接扫码就足以了
2.复制exp://xxxx.xx.xx.xx那几个链接,到project上收索该地点,能够观察项目,如图

图片 19

图片 20

 

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

熟话说,工欲善其事,必先利其器,那里自身引进大家用 vs
code编辑器敲代码,效果是那一个爽的!

图片 21

 

找到大家刚刚创建的品类,有vs code打开它,并且编写代码!

图片 22

 在小编修改了内容之后,app的内容也时有发生了转变!

 图片 23

 

用vs
code写rn的话,作者在引进大家安装多少个插件,安装插件的指标是为了进一步火速的支付

图片 24

 

 


 

 

 好了,到这一步,大家的app就到底跑起来了,要是您耐心的和自作者学到了那边,那么恭喜你,你很牛逼,因为自个儿第叁搞那么些的时候,搞了二日,照旧一脸蒙蔽!

接二连三作品频频创新,敬请期待!

style=”font-size: 18px; color: #ff0000;”>文章为作者原创,转发请评释出处。

 

相关文章