native react 开发直播_开发移动app用react 还是 react-native - CSDN
  • React Native是近年来最值得花时间学习的移动开发新技术,其在不断进化、成熟的同时,性能也在持续提升。卜赫主要分享了React Native Pili在开发过程中的设计斟酌和踩过的坑。以下是正文: React Native是什么 ...

    转载自:http://geek.csdn.net/news/detail/98643

    React Native是近年来最值得花时间学习的移动开发新技术,其在不断进化、成熟的同时,性能也在持续提升。卜赫主要分享了React Native Pili在开发过程中的设计斟酌和踩过的坑。以下是正文:

    React Native是什么

    React Native的iOS和Android版本目前是由官方在维护,Windows版本是微软做了迁移,淘宝有把React Native移植到Web上,另外还有工程师已经把它移植到了OS X上了。所以在将来如果你会React Native,就会很容易成为一个全端工程师。

    React Native用的是ReactJS语法。其他的跨平台方案一般是先编译成中间码再在虚拟机中运行,例如Java和.Net,React Native却不太一样,因为跨平台是非常难的,平台视图会有很大差异。React Native的思路是让我们学习这种开发模式后可以用这套模式去开发任何平台的应用,即所谓的「learn once ,write anywhere」。但是开发的代码会稍微有些不同,例如在Web端会写一些HTML的Tag,在React Native中则会写一些抽象出来的原生组件的Tag。

    React Native和原有的Hybrid框架有何区别呢?首先,它是用原生组件去渲染的,而不是用WebView,后面的优势劣势也是因此产生的。其次,它的响应速度也不像是在手机浏览器里面跑的WebApp,它所有的页面都是Native。另外,它的动画也不是CSS模拟的,而是一些原生动画,这个则可以给用户带来非常好的体验。

    当然Hybrid框架也有一些优势,比如你可以用你想用的所有前端库,并且也确实做到了跨平台,但是随着React Native的不断进步——几乎支持所有的平台,这个优势正在慢慢地被蚕食。

    React Native本身是一个UI框架,它更多的像一个库。原来前端可能都是大的吓人,需要把通讯、MVC等全部解决了,而React Native只是一个UI,只需用它来写界面,其他的问题你自己去解决即可。你选择哪种架构,React Native并不关心,它只专注地把UI部分做好。当然,这也会带来一些问题,因为所有的东西都是视图,做的时候会带来一些挑战。

    直播简介

    图片描述

    图 1

    知道了React Native后,我们来了解下直播。了解直播前,让我们先理性地认识一下什么是视频。视频大家每天都看,但是到底什么是视频呢?其实它是一个封装,主要封装了三部分内容,如图1所示。上面的部分是Metadata,下面是声音,中间最主要的是图片。它是用一些连续的图片来欺骗我们的眼睛,当超过每秒24帧的时候,我们看起来就会是连续的。

    图片描述

    图 2

    直播的模型比较简单,如图2所示。由主播发起,推送流到云端,然后其他的人通过搜索来观看直播。直播的协议有很多,比较主流的有RTMP、HLS。RTMP协议是Adobe公司开发的,HLS则是苹果开发的,它们的主要区别如图3所示。

    图片描述

    图 3

    其中,RTMP是用的TCP长连接,所以它是一个长连接协议。而HLS从本质上来讲,是一个播放列表,持续不断地更新这个播放列表,最终会产生一些ts的切片文件。直接用苹果的浏览器打开之后就可以看HLS,有些Android也支持,但是HLS的延时比较长,超过10秒钟。

    图片描述

    图 4

    同时,它们具体的使用场景也有一些不同,如图4所示。在即时互动的情况下,我们倾向于选用RTMP协议,例如在秀场应用中,如果一个土豪给主播发了一个红包,但是主播10秒之后才互动就会很不好。而广播协议HLS,则比较适用于做点播和回放,例如我们在看一个演唱会的时候,可能所有人在看这个演唱会都是延迟了10秒钟,但是你不会关心这10秒钟,因为每一秒都延时了10秒钟。

    一个直播应用需要多大开发量

    相信映客、龙珠直播等直播APP大家都有用过,但是你是否知道一个直播应用需要多大开发量呢?图5、图6是我们开发的一个最简单的直播应用的核心代码展示。

    图片描述

    图 5

    图片描述

    图 6

    我们会发现,一个直播应用核心开发竟然只需2行代码。前面我们知道,直播模型就是一个推流和收流。图5是推流的代码,里面可以设置推到云端的地址、推流的分辨率、码率率等属性,设置完后就可以推流,推流以后就可以播放了,播放的时候还可以设置播放的地址、硬件码、软件码等属性,如图6。

    上面的那些代码为何如此简单,里面都隐藏了哪些细节呢?其实我们在背后做了很多工作,而且用了不止一种语言。React Native是JS语言,它是跑在iOS和Android上的。但是我们在做的过程中,并没有用JS做视频的编解码,也没有用JS去实现RTMP的协议,主要原因是一些性能问题无法解决。最终采用的方案是JS+Objective-C+Java,即在Android里使用JS+Java,在iOS里面使用Objective-C,然后在最上层用一个统一的API。对应用层工程师而言是跨平台的,即你在Android和iOS里面写的代码是完全一样的,但是底层我们会用Java和Objective-C做一定的适配工作。以某个APP为例,图7是推流部分,最上面的Streaming是用JS来写的,下面性能关键的部分是用Objective-C来写的,比如推流有一个预览的视图,有一个协议的推流的管理器,然后还有一个编码器。播放部分与推流类似,如图8所示。上面是一个Preview的JS适配在Android的方案,下面基本是用Native来写的,有一个播放页面和播放流的管理器,包括是硬解码还是软解码。

    图片描述

    图 7

    图片描述

    图 8

    所以总结下来,不管在底层的React Native有多少的状态,我们最终都能通过JS和Native Code把它们隐藏在所有的细节里,最终展现给开发者看的只有一个最终页面和够用的属性,即Preview View和Player View。

    API 的设计与调用

    React Native是以View为中心的,所以在设计React Native API的时候,强制要求我们API的设计风格和访问方式统一化,主要有「视图」和「属性」这两个概念,这无疑对API设计者的功力要求更高了。

    首先来看布局管理,布局管理其实是告诉大家这个界面是什么样的,目前React Native支持如下一些属性,如图9所示。

    从经验来看,这些属性基本上可以满足绝大部分的开发需求了,你可以尽量做一些弹性的布局、按比例的布局,因为你可以拿到设备的整个层高宽度和高度,进而做一些百分比布局。

    图片描述

    图 9

    然后是配置管理,如图10所示。所谓的配置管理,就是那些一旦设定就不需要改变的东西,因为你的界面一旦确定了,你是要推哪些流和码率,这些在整个推流过程中是不变的。因此,这个配置是相对比较静态的配置。

    图片描述

    图10

    后面是状态管理,如图11所示。状态显然与配置不一样,因为它是可以变的,例如用户可以切换是否静音或画面大小缩放比例等。

    图片描述

    图 11

    接着是动作管理,如图12所示。这部分可能与过去的设计有一些差异,之前在设计API的时候,动作一般会用方法来解决。这里实际也是一个状态,因为你的API不会触发底层的状态改变。但是它是反过来的,是先声明目前的状态,然后再根据当前的状态去实际的调离底层的方法,是开始推流还是停止推流。

    图片描述

    图 12

    图13是事件管理,与原生的API也不同。这里可以是一个本地函数或者闭包,当某个事件过来的时候可以调用你的函数。

    图片描述

    图 13

    前面介绍了如何做API设计,那么工程师该如何去调用API呢?答案是状态驱动,如图14所示。首先要在当前的界面初始化一个变量,意味有一个这样的变量表示当前是不是静音,然后在创建Streaming的时候,Streaming的Muted状态是等于该变量的,这样它们两个就绑定在一起了。初始化时,Streaming处于静音的状态,然后比如说有一个按纽的回调方法去触发变量的改变,React Native发现当前的状态发生改变后,就会把所有的属性做一个diff,这是React Native一个比较核心的性能优化点,diff后发现Streaming的Muted属性发生变化,就会通知底层的Native代码,这样就完成了静音的操作。开始和停止推流也是类似的,只要把state设成某一个状态然后去改变它就可以了。

    图片描述

    图 14

    我们用了这么多代码,它们之间的布局可能会非常不同,那么最终是该如何把这些东西融合在一起,去适配它们呢?React Native本身是采用了W3C的新标准,即弹性盒子,它的方式是设计一些相对的布局,例如你的元素是都靠左,还是都靠右,还是在中间,还是分散它,还是等距离等。当然这只是一方面,它的整个规范是比较复杂的,这里面只简单讲了一个属性,具体可以参考链接(https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)。图15是Flex Box布局标准的一部分。

    图片描述

    图 15

    图片描述

    图 16

    图16是Android Streaming View的一个界面树。我们可以看到它的页面有很多层次,中间还有一个对焦框。其实我们只关心最外面的一层,最终应用开发者使用最外面一层的View即可,对里面的视图并不关心。在Android中我们一般会用XML Layout去布局,但是在设计一个API的时候,给用户很多种方式显然是不太合适的。当你给了用户一个XML,然后说用我们的API的时候,在Android里面还要再去改XML,如果对方是一个Web开发者,它通过React Native技术进入了移动开发领域,看到这个XML之后会感觉很慌,因为并不知道这个是什么。同理,iOS里面也是一样的,里面可能会要用到Auto Layout。这些都是不太推荐的。所以在Android里面,我们是直接用代码进行布局,它的核心界面结构并不是太复杂。iOS里面也是直接保持了最外层的View和里面的View大小一致。但最终开发者使用的,都是用Flex Box来布局。

    在开发直播应用的时候,还有一个比较重要的内容,就是如何优雅地获取和释放硬件资源。我们知道,在iOS里面这并不是问题,因为iOS会根据你的应用状况去释放和获取资源,但是在Android里却可能是个问题。在Android里面,你如果在后台录像或录声音会比较危险,这个时候React Native比较贴心地提供了类似的方法,你可以去监听主Activity的做法,然后对应地在你的视图里面做一些响应,去释放一些硬件。

    React Native应用中的一些坑

    如今,React Native发展得非常迅速,版本升级也是非常频繁。去年大概10月份的时候还是0.14版本,现在已经是0.26版本了,迭代速度非常快,一两周可能就会发一个版本。发新版本时,有的时候可以平滑地升级,但是有的时候会非常地痛苦,那么究竟是升级还是不升级呢?不升级,绑定在某一个版本持续使用,这种选择可能更适用于那种平台本身已经非常成熟的情况。而现在React Native的发展速度极快了,导航栏已经发布了三个版本,新的组件在不断地发布,性能也在持续地优化。例如原来是在JS的线程里面去执行动画,而JS是单线程的,执行动画时会对界面产生一定的影响,所以他们在尝试在其他线程中执行动画。最近还支持了3Dtouch等。因此,最好是紧跟React Native版本更新,至少不要延迟超过两个版本。

    然而升级的过程中,也伴随着诸多不适。

    第一个是React Native在0.14版本以后,整个图片的加载方式都变了。原因是原来的图片加载方式非常草率,基本上是你估计在哪里然后给你渲染出来就好了。但是大家知道在Android和iOS设备上,会有不同的分辨率大小。后来的版本采用了静态编译的方式来解决这个问题,但是从0.14版本往上升的时候,需要你重新做一大堆的事情去手动升级。

    第二个是0.19版本时,Java里面的一个Annotation的包移动了位置,这个小小的升级却产生了非常大的影响,导致所有的第三方的组件都要改动后重新编译,因为所有第三方的扩展组建都非常依赖Annotation。这个过程当中,可能一时兴起写了一个组件丢在那儿不维护了,就会导致了大量的第三方库不可用,而这个问题是非常严重的。第三是在你每次升级Node.js版本之后,并没有提示要把所有的依赖性文件都删除,这样可能会带来一系列问题,而React Native的issues列表里面可能至少有5%都是因为这个问题导致的。

    展开全文
  • 基于腾讯互动直播封装为React-Native,android、iOS都已封装
  • 声明:本文来自「七牛云主办的架构师实践日——亿级移动应用架构最佳实践」的演讲内容整理。PPT、速记和现场演讲视频等参见“七牛架构师实践日”官网。 嘉宾:卜赫,七牛云布道师。 责编:钱曙光,关注架构和...

    声明:本文来自「七牛云主办的架构师实践日——亿级移动应用架构最佳实践」的演讲内容整理。PPT、速记和现场演讲视频等参见“七牛架构师实践日”官网。
    嘉宾:卜赫,七牛云布道师。
    责编:钱曙光,关注架构和算法领域,寻求报道或者投稿请发邮件qianshg@csdn.net,另有「CSDN 高级架构师群」,内有诸多知名互联网公司的大牛架构师,欢迎架构师加微信qshuguang2008申请入群,备注姓名+公司+职位。

    React Native是近年来最值得花时间学习的移动开发新技术,其在不断进化、成熟的同时,性能也在持续提升。卜赫主要分享了React Native Pili在开发过程中的设计斟酌和踩过的坑。以下是正文:

    React Native是什么

    React Native的iOS和Android版本目前是由官方在维护,Windows版本是微软做了迁移,淘宝有把React Native移植到Web上,另外还有工程师已经把它移植到了OS X上了。所以在将来如果你会React Native,就会很容易成为一个全端工程师。

    React Native用的是ReactJS语法。其他的跨平台方案一般是先编译成中间码再在虚拟机中运行,例如Java和.Net,React Native却不太一样,因为跨平台是非常难的,平台视图会有很大差异。React Native的思路是让我们学习这种开发模式后可以用这套模式去开发任何平台的应用,即所谓的「learn once ,write anywhere」。但是开发的代码会稍微有些不同,例如在Web端会写一些HTML的Tag,在React Native中则会写一些抽象出来的原生组件的Tag。

    React Native和原有的Hybrid框架有何区别呢?首先,它是用原生组件去渲染的,而不是用WebView,后面的优势劣势也是因此产生的。其次,它的响应速度也不像是在手机浏览器里面跑的WebApp,它所有的页面都是Native。另外,它的动画也不是CSS模拟的,而是一些原生动画,这个则可以给用户带来非常好的体验。

    当然Hybrid框架也有一些优势,比如你可以用你想用的所有前端库,并且也确实做到了跨平台,但是随着React Native的不断进步——几乎支持所有的平台,这个优势正在慢慢地被蚕食。

    React Native本身是一个UI框架,它更多的像一个库。原来前端可能都是大的吓人,需要把通讯、MVC等全部解决了,而React Native只是一个UI,只需用它来写界面,其他的问题你自己去解决即可。你选择哪种架构,React Native并不关心,它只专注地把UI部分做好。当然,这也会带来一些问题,因为所有的东西都是视图,做的时候会带来一些挑战。

    直播简介

    图片描述

    图 1

    知道了React Native后,我们来了解下直播。了解直播前,让我们先理性地认识一下什么是视频。视频大家每天都看,但是到底什么是视频呢?其实它是一个封装,主要封装了三部分内容,如图1所示。上面的部分是Metadata,下面是声音,中间最主要的是图片。它是用一些连续的图片来欺骗我们的眼睛,当超过每秒24帧的时候,我们看起来就会是连续的。

    图片描述

    图 2

    直播的模型比较简单,如图2所示。由主播发起,推送流到云端,然后其他的人通过搜索来观看直播。直播的协议有很多,比较主流的有RTMP、HLS。RTMP协议是Adobe公司开发的,HLS则是苹果开发的,它们的主要区别如图3所示。

    图片描述

    图 3

    其中,RTMP是用的TCP长连接,所以它是一个长连接协议。而HLS从本质上来讲,是一个播放列表,持续不断地更新这个播放列表,最终会产生一些ts的切片文件。直接用苹果的浏览器打开之后就可以看HLS,有些Android也支持,但是HLS的延时比较长,超过10秒钟。

    图片描述

    图 4

    同时,它们具体的使用场景也有一些不同,如图4所示。在即时互动的情况下,我们倾向于选用RTMP协议,例如在秀场应用中,如果一个土豪给主播发了一个红包,但是主播10秒之后才互动就会很不好。而广播协议HLS,则比较适用于做点播和回放,例如我们在看一个演唱会的时候,可能所有人在看这个演唱会都是延迟了10秒钟,但是你不会关心这10秒钟,因为每一秒都延时了10秒钟。

    一个直播应用需要多大开发量

    相信映客、龙珠直播等直播APP大家都有用过,但是你是否知道一个直播应用需要多大开发量呢?图5、图6是我们开发的一个最简单的直播应用的核心代码展示。

    图片描述

    图 5

    图片描述

    图 6

    我们会发现,一个直播应用核心开发竟然只需2行代码。前面我们知道,直播模型就是一个推流和收流。图5是推流的代码,里面可以设置推到云端的地址、推流的分辨率、码率率等属性,设置完后就可以推流,推流以后就可以播放了,播放的时候还可以设置播放的地址、硬件码、软件码等属性,如图6。

    上面的那些代码为何如此简单,里面都隐藏了哪些细节呢?其实我们在背后做了很多工作,而且用了不止一种语言。React Native是JS语言,它是跑在iOS和Android上的。但是我们在做的过程中,并没有用JS做视频的编解码,也没有用JS去实现RTMP的协议,主要原因是一些性能问题无法解决。最终采用的方案是JS+Objective-C+Java,即在Android里使用JS+Java,在iOS里面使用Objective-C,然后在最上层用一个统一的API。对应用层工程师而言是跨平台的,即你在Android和iOS里面写的代码是完全一样的,但是底层我们会用Java和Objective-C做一定的适配工作。以某个APP为例,图7是推流部分,最上面的Streaming是用JS来写的,下面性能关键的部分是用Objective-C来写的,比如推流有一个预览的视图,有一个协议的推流的管理器,然后还有一个编码器。播放部分与推流类似,如图8所示。上面是一个Preview的JS适配在Android的方案,下面基本是用Native来写的,有一个播放页面和播放流的管理器,包括是硬解码还是软解码。

    图片描述

    图 7

    图片描述

    图 8

    所以总结下来,不管在底层的React Native有多少的状态,我们最终都能通过JS和Native Code把它们隐藏在所有的细节里,最终展现给开发者看的只有一个最终页面和够用的属性,即Preview View和Player View。

    API 的设计与调用

    React Native是以View为中心的,所以在设计React Native API的时候,强制要求我们API的设计风格和访问方式统一化,主要有「视图」和「属性」这两个概念,这无疑对API设计者的功力要求更高了。

    首先来看布局管理,布局管理其实是告诉大家这个界面是什么样的,目前React Native支持如下一些属性,如图9所示。

    从经验来看,这些属性基本上可以满足绝大部分的开发需求了,你可以尽量做一些弹性的布局、按比例的布局,因为你可以拿到设备的整个层高宽度和高度,进而做一些百分比布局。

    图片描述

    图 9

    然后是配置管理,如图10所示。所谓的配置管理,就是那些一旦设定就不需要改变的东西,因为你的界面一旦确定了,你是要推哪些流和码率,这些在整个推流过程中是不变的。因此,这个配置是相对比较静态的配置。

    图片描述

    图10

    后面是状态管理,如图11所示。状态显然与配置不一样,因为它是可以变的,例如用户可以切换是否静音或画面大小缩放比例等。

    图片描述

    图 11

    接着是动作管理,如图12所示。这部分可能与过去的设计有一些差异,之前在设计API的时候,动作一般会用方法来解决。这里实际也是一个状态,因为你的API不会触发底层的状态改变。但是它是反过来的,是先声明目前的状态,然后再根据当前的状态去实际的调离底层的方法,是开始推流还是停止推流。

    图片描述

    图 12

    图13是事件管理,与原生的API也不同。这里可以是一个本地函数或者闭包,当某个事件过来的时候可以调用你的函数。

    图片描述

    图 13

    前面介绍了如何做API设计,那么工程师该如何去调用API呢?答案是状态驱动,如图14所示。首先要在当前的界面初始化一个变量,意味有一个这样的变量表示当前是不是静音,然后在创建Streaming的时候,Streaming的Muted状态是等于该变量的,这样它们两个就绑定在一起了。初始化时,Streaming处于静音的状态,然后比如说有一个按纽的回调方法去触发变量的改变,React Native发现当前的状态发生改变后,就会把所有的属性做一个diff,这是React Native一个比较核心的性能优化点,diff后发现Streaming的Muted属性发生变化,就会通知底层的Native代码,这样就完成了静音的操作。开始和停止推流也是类似的,只要把state设成某一个状态然后去改变它就可以了。

    图片描述

    图 14

    我们用了这么多代码,它们之间的布局可能会非常不同,那么最终是该如何把这些东西融合在一起,去适配它们呢?React Native本身是采用了W3C的新标准,即弹性盒子,它的方式是设计一些相对的布局,例如你的元素是都靠左,还是都靠右,还是在中间,还是分散它,还是等距离等。当然这只是一方面,它的整个规范是比较复杂的,这里面只简单讲了一个属性,具体可以参考链接(https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)。图15是Flex Box布局标准的一部分。

    图片描述

    图 15

    图片描述

    图 16

    图16是Android Streaming View的一个界面树。我们可以看到它的页面有很多层次,中间还有一个对焦框。其实我们只关心最外面的一层,最终应用开发者使用最外面一层的View即可,对里面的视图并不关心。在Android中我们一般会用XML Layout去布局,但是在设计一个API的时候,给用户很多种方式显然是不太合适的。当你给了用户一个XML,然后说用我们的API的时候,在Android里面还要再去改XML,如果对方是一个Web开发者,它通过React Native技术进入了移动开发领域,看到这个XML之后会感觉很慌,因为并不知道这个是什么。同理,iOS里面也是一样的,里面可能会要用到Auto Layout。这些都是不太推荐的。所以在Android里面,我们是直接用代码进行布局,它的核心界面结构并不是太复杂。iOS里面也是直接保持了最外层的View和里面的View大小一致。但最终开发者使用的,都是用Flex Box来布局。

    在开发直播应用的时候,还有一个比较重要的内容,就是如何优雅地获取和释放硬件资源。我们知道,在iOS里面这并不是问题,因为iOS会根据你的应用状况去释放和获取资源,但是在Android里却可能是个问题。在Android里面,你如果在后台录像或录声音会比较危险,这个时候React Native比较贴心地提供了类似的方法,你可以去监听主Activity的做法,然后对应地在你的视图里面做一些响应,去释放一些硬件。

    React Native应用中的一些坑

    如今,React Native发展得非常迅速,版本升级也是非常频繁。去年大概10月份的时候还是0.14版本,现在已经是0.26版本了,迭代速度非常快,一两周可能就会发一个版本。发新版本时,有的时候可以平滑地升级,但是有的时候会非常地痛苦,那么究竟是升级还是不升级呢?不升级,绑定在某一个版本持续使用,这种选择可能更适用于那种平台本身已经非常成熟的情况。而现在React Native的发展速度极快了,导航栏已经发布了三个版本,新的组件在不断地发布,性能也在持续地优化。例如原来是在JS的线程里面去执行动画,而JS是单线程的,执行动画时会对界面产生一定的影响,所以他们在尝试在其他线程中执行动画。最近还支持了3Dtouch等。因此,最好是紧跟React Native版本更新,至少不要延迟超过两个版本。

    然而升级的过程中,也伴随着诸多不适。

    第一个是React Native在0.14版本以后,整个图片的加载方式都变了。原因是原来的图片加载方式非常草率,基本上是你估计在哪里然后给你渲染出来就好了。但是大家知道在Android和iOS设备上,会有不同的分辨率大小。后来的版本采用了静态编译的方式来解决这个问题,但是从0.14版本往上升的时候,需要你重新做一大堆的事情去手动升级。

    第二个是0.19版本时,Java里面的一个Annotation的包移动了位置,这个小小的升级却产生了非常大的影响,导致所有的第三方的组件都要改动后重新编译,因为所有第三方的扩展组建都非常依赖Annotation。这个过程当中,可能一时兴起写了一个组件丢在那儿不维护了,就会导致了大量的第三方库不可用,而这个问题是非常严重的。第三是在你每次升级Node.js版本之后,并没有提示要把所有的依赖性文件都删除,这样可能会带来一系列问题,而React Native的issues列表里面可能至少有5%都是因为这个问题导致的。

    编辑推荐:架构技术实践系列文章(部分):


    2016年9月22日-23日,SDCC 2016大数据技术&架构实战峰会将在杭州举行,两场峰会大牛讲师来自阿里、京东、苏宁、唯品会、美团点评、游族、饿了么、有赞、Echo等知名互联网公司,共同探讨海量数据下的应用监控系统建设、异常检测的算法和实现、大数据基础架构实践、敏捷型数据平台的构建及应用、音频分析的机器学习算法应用,以及高可用/高并发/高性能系统架构设计、电商架构、分布式架构等话题与技术。
    9月4日24点前仍处于最低六折优惠票价阶段,单场峰会(含餐)门票只需499元,5人以上团购或者购买两场峰会通票更有特惠,限时折扣,预购从速。(票务详情链接)。

    展开全文
  • 1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。...需要的开发环境主要有node.js + react native +

    1 前言

    最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始有这种跨平台的需求了,笔者在一家传统公司)。最后开始打算从RN开始学起。废话不多说,开始搞起。

    2 基于webstorm的RN环境搭建

    本次开发采用的环境为windows10+webstorm2017.3+安卓开发环境
    需要的开发环境主要有node.js + react native + android sdk

    因为我是Android狗,所以也不去搞IOS了,也没钱去买Mac
    因为Android环境造就搭建好了,所以Android环境的搭建省略,网上也可以搜到怎么搭建Android开发环境。
    因此,主要搭建node.js + react native ,下面是搭建步骤

    1 下载安装node.js
    安装之前先检查是否已有node.js环境,在cmd 命令下输入node -v, 出现如下画面,则表示已经成功安装node.js环境
    这里写图片描述
    很明显,我没有搭建
    node.js官网 下载安装包并安装,然后配置环境变量。注意下载对应的版本,Windows下建议下载X64的,我下了一个LTS版本:8.9.3

    配置环境变量步骤: 右击此电脑–》属性–》高级设置–》环境变量,然后将变量名NODE_PATH和变量值(node.js安装目录)配置进去,这段比较简单,可以自行网上查找资料完成。
    重新打开cmd窗口,输入node -v即可看到安装完成了。
    这里写图片描述

    配置npm源
    由于国外的npm服务器下载太慢了,因此配置国内的服务器如下:

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    2 安装react native环境
    打开cmd命令行,安装react native环境,如下:
    这里写图片描述
    安装成功后后会有上面的提示

    测试安装react native环境是否成功,可以在任意目录执行如下命令,新建一个react-native工程

    react-native init Demo

    最后如下就说明环境搭建成功了
    这里写图片描述

    初始化的工程如下:
    这里写图片描述

    3 下载安装WebStorm
    去官网下载WebStorm了,下载完了记得找个办法和谐下。

    至此,react native的开发环境已经完成,可以开始新建RN项目了

    3 新建RN的工程并创建项目运行

    1 打开webstorm,创建一个react native项目
    点击工具栏File–》new–》project,可以看到如下画面
    这里写图片描述

    location填写你创建的项目要存放的路径,后面untitiled改成自己项目的名称,
    Node intercepter填写第一步node.js的安装路径
    create-react-app填写的是react-native-cli的地址,默认在C盘的用户名下面的某个地址

    最后建好的工程如下:
    这里写图片描述

    2 运行react-native 项目
    1 用Android Studio 打开该项目,下载一些必要的库或者gradle工具后即可运行
    此处暂且不说
    2 在WebStorm中点击运行下的 android即可
    这里写图片描述

    修改一下App.js,增加一句这是第一个react native程序,
    这里写图片描述

    运行效果如下:
    这里写图片描述

    4 错误记录

    1 出现Could not find com.android.tools.build:gradle:3.0.0.
    解决办法
    http://blog.csdn.net/zhouxianling233/article/details/78359217
    这个是升级到gradle版本问题,与react native基本上无太大关系

    2 运行程序标红,出现unable to load script from assets
    https://www.cnblogs.com/vipstone/p/7205608.html
    报错页面晃动手机,显示菜单 =》 点击Dev Settings =》 点击Debug server host & port for device =》 设置IP和端口(ex:192.168.0.20:8081)
    ip为与手机连接的电脑的IP

    3 标红,出现could not connect to development server
    http://blog.csdn.net/qq_25827845/article/details/52974991

    控制台下启动npm server

    npm start

    4 出现bundling failed: NotFoundError: Cannot find entry file index.android.js in any of the roots:
    这是因为新版本RN需要修改配置了,参考如下:
    https://github.com/facebook/react-native/issues/16517

    For Android, go to your Module: app’s build.gradle and add the following above the line: apply from: “../../node_modules/react-native/react.gradle”

    project.ext.react = [
    entryFile: “index.js”
    ]
    In MainApplication.java, you need to override another function in the anonymous ReactNativeHost class by adding this:

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
    

    环境搭建下来,总体感觉比较坑爹的

    源代码参考:
    https://github.com/qiyei2015/FirstApp/tree/master

    展开全文
  • React Native 混合开发-Android篇创建一个React Native 项目1. 通过npm安装react-native的方式添加一个React Native项目2. 通过react-native init来初始化一个React Native项目二、添加React Native所需要的依赖第一...

    创建一个React Native 项目

    在做混合开发之前我们首先需要创建一个没有Android和iOS模块的React Native项目。我们可以通过两种方式来创建一个这样的React Native项目:

    1. 通过npm安装react-native的方式添加一个React Native项目;
    2. 通过react-native init来初始化一个React Native项目;

    1. 通过npm安装react-native的方式添加一个React Native项目

    第一步:创建一个名为RNHybridApp的目录,然后在该目录下添加一个包含如下信息的package.json:

    {
      "name": "RNHybrid",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      }
    }
    

    第二步:在为package.json添加react-native
    在该目录下执行:

    npm install --save react-native
    

    执行完上述命令之后,你会看到如下警告:
    在这里插入图片描述
    其中,有一条警告npm WARN react-native@0.55.4 requires a peer of react@16.3.1 but none is installed告诉我们需要安装react@16.3.1:

    npm install --save react@16.3.1
    

    至此,一个不含Android和iOS模块的React Native项目便创建好了。

    2. 通过react-native init来初始化一个React Native项目

    除了上述方式之外,我们也可以通过react-native init命令来初始化一个React Native项目。

    react-native init RNHybrid
    

    上述命令会初始化一个完成的名为RNHybrid的React Native项目,然后我们将里面的android和ios目录删除,替换成已存在Android和iOS项目。

    二、添加React Native所需要的依赖

    在上文中我们已经创建了个一个React Native项目,接下来我们来看一下如何将这个React Native项目和我们已经存在的Native项目进行融合。

    在进行融合之前我们需要将已经存在的Native项目放到我们创建的RNHybrid下,比如:我有一个名为RNHybridAndroid的Android项目,将其放到RNHybrid目录下:

    RNHybrid
    ├── RNHybridAndroid
    ├── package.json
    ├── node_modules
    └── .gitignore
    

    第一步:配置maven

    接下来我们需要为已经存在的RNHybridAndroid项目添加 React Native依赖,在RNHybrid/RNHybridAndroid/app/build.gradle文件中添加如下代码:

    dependencies {
        compile 'com.android.support:appcompat-v7:23.0.1'
        ...
        compile "com.facebook.react:react-native:+" // From node_modules
    }
    

    在这里插入图片描述
    然后,我们为RNHybridAndroid项目配置使用的本地React Native maven目录,在RNHybrid/RNHybridAndroid/build.gradle文件中添加如下代码:

    allprojects {
        repositories {
            mavenLocal()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$rootDir/../node_modules/react-native/android"
            }
            ...
        }
        ...
    }
    

    在这里插入图片描述
    提示:为确保你配置的目录正确,可以通过在Android Studio中运行Gradle sync 看是否有 “Failed to resolve: com.facebook.react:react-native:0.x.x” 的错误出现,没有错误则说明配置正确,否则说明配置路由有问题。

    第二步:配置权限

    接下来我们为APP运行配置所需要的权限:检查你项目中的AndroidManifest.xml文件中看是否有如下权限:

    <uses-permission android:name="android.permission.INTERNET" />
    

    如果没有,则需要将上述权限添加到AndroidManifest.xml中。

    另外,如果你需要用到RN的Dev Settings功能:则需要在AndroidManifest.xml文件中添加如下代码:

    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    

    第三步: 指定要ndk需要兼容的架构(重要)

    Android不能同时加载多种架构的so库,现在很多Android第三方sdks对abi的支持比较全,可能会包含armeabi, armeabi-v7a,x86, arm64-v8a,x86_64五种abi,如果不加限制直接引用会自动编译出支持5种abi的APK,而Android设备会从这些abi进行中优先选择某一个,比如:arm64-v8a,但如果其他sdk不支持这个架构的abi的话就会出现crash。如下图:
    在这里插入图片描述
    怎么解决呢:

    defaultConfig {
    ....
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    

    上述代码的意思是,限制打包的so库只包含armeabi-v7a与x86。

    三、创建index.js并添加你的React Native代码

    通过上述两步,我们已经为RNHybridAndroid项目添加了React Native依赖,接下来我们来开发一些JS代码。
    在RNHybrid目录下创建一个index.js文件并添加如下代码:

    import { AppRegistry } from 'react-native';
    import App from './App';
    
    AppRegistry.registerComponent('App1', () => App);
    

    上述代码,AppRegistry.registerComponent(‘App1’, () => App);目的是向React Native注册一个名为App1的组件,然后我会在第四步给大家介绍如何在Android中加载并显示出这个组件。

    另外,在上述代码中我们引用了一个App.js文件:

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    type Props = {};
    export default class App extends Component<Props> {
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
              this is App
            </Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      }
     });
    

    这个App.js文件代表了我们React Native的一个页面,在这个页面中显示了this is App的文本内容。

    以上就是为本次演示所添加的React Native代码,你也可以根据需要添加更多的React Native代码以及组件出来。

    四、为React Native创建一个Activity来作为容器

    经过上述3、4步,我们已经为RNHybridAndroid项目添加了React Native依赖,并且创建一些React Native代码和注册了一个名为App1的组件,接下来我们来学习下如何在RNHybridAndroid项目中使用这个App1组件。

    • 1 通过ReactInstanceManager的方式:灵活,可定制性强;
    • 2 通过继承ReactActivity的方式:简单,可定制性差;

    创建RNPageActivity

    首先我们需要创建一个Activity来作为React Native的容器,

    public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
        private ReactRootView mReactRootView;
        private ReactInstanceManager mReactInstanceManager;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            mReactRootView = new ReactRootView(this);
            mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
            // 这个"App1"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
            mReactRootView.startReactApplication(mReactInstanceManager, "App1", null);
    
            setContentView(mReactRootView);
        }
    
        @Override
        public void invokeDefaultOnBackPressed() {
            super.onBackPressed();
        }
    }
    

    参数说明

    • setBundleAssetName:打包时放在assets目录下的JS bundle包的名字,App release之后会从该目录下加载JS bundle;
    • setJSMainModulePath:JS bundle中主入口的文件名,也就是我们上文中创建的那个index.js文件;
    • addPackage:向RN添加Native Moudle,在上述代码中我们添加了new MainReactPackage()这个是必须的,另外,如果我们创建一些其他的Native Moudle也需要通过addPackage的方式将其注册到RN中。需要指出的是RN除了这个方法外,也提供了一个addPackages方法用于批量向RN添加Native Moudle;
    • setUseDeveloperSupport:设置RN是否开启开发者模式(debugging,reload,dev memu),比如我们常用开发者弹框;
    • setInitialLifecycleState:通过这个方法来设置RN初始化时所处的生命周期状态,一般设置成LifecycleState.RESUMED就行,和下文讲的Activity容器的生命周期状态关联;
    • mReactRootView.startReactApplication:它的第一个参数是mReactInstanceManager,第二个参数是我们在index.js中注册的组件的名字,第三个参数接受一个Bundle来作为RN初始化时传递给JS的初始化数据,它的具体用法我会在React Android 混合开发讲解的视频教程中再具体的讲解;

    在中AndroidManifest.xml注册一个RNPageActivity

    Android系统要求,每一个要打开的Activity都要在AndroidManifest.xml中进行注册:

    <activity
        android:name=".RNPageActivity"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
    

    上述代码中我们为RNPageActivity添加了一个@style/Theme.AppCompat.Light.NoActionBar类型的theme,这也是React Native UI组件所要求的主题。

    为ReactInstanceManager添加Activity的生命周期回调

    一个 ReactInstanceManager可以被多个activities或fragments共享,所以我们需要在Activity的生命周期中回调ReactInstanceManager的对于的方法。

    @Override
    protected void onPause() {
        super.onPause();
    
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }
    
    @Override
    protected void onResume() {
        super.onResume();
    
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }
    
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
    
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }
    

    从上述代码中你会发现有个不属于Activity生命周期中的方法onBackPressed,添加它的目的主要是为了当用户单击手机的返回键之后将事件传递给JS,如果JS消费了这个事件,Native就不再消费了,如果JS没有消费这个事件那么RN会回调invokeDefaultOnBackPressed代码。

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    

    添加开发者菜单

    在RN中有个很好用的工具开发者菜单,我们平时调试RN应用时对它的使用频率很高,接下来我们来为RNHybridAndroid添加开着菜单。

    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (getUseDeveloperSupport()) {
            if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
                mReactInstanceManager.showDevOptionsDialog();
                return true;
            }
    	}
        return super.onKeyUp(keyCode, event);
    }
    

    通过上代码即可监听Ctrl + M来打开RN开发者菜单。
    另外,RN也提供了双击R来快速加载JS的功能,通过如下代码即可打开该功能:

    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (getUseDeveloperSupport()) {
            if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
                mReactInstanceManager.showDevOptionsDialog();
                return true;
            }
            boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer).didDoubleTapR(keyCode, getCurrentFocus());
            if (didDoubleTapR) {//双击R 重新加载JS
                mReactInstanceManager.getDevSupportManager().handleReloadJS();
                return true;
            }
        }
        return super.onKeyUp(keyCode, event);
    }
    

    使用ReactActivity来作为RN容器

    在上述的代码中我们都是通过ReactInstanceManager来创建和加载JS的,然后重写了Activity的生命周期来对ReactInstanceManager进行回调,另外,重写了onKeyUp来启用开发者菜单等功能。

    另外,查看RN的源码你会发现在RN sdk中有个叫ReactActivity的Activity,该Activity是RN官方封装的一个RN容器。另外,在通过react-native init命令初始化的一个项目中你会发现有个MainActivity是继承ReactActivity的,接下来我们就来继承ReactActivity来封装一个RN容器。

    public class ReactPageActivity extends ReactActivity implements IJSBridge{
        /**
         * Returns the name of the main component registered from JavaScript.
         * This is used to schedule rendering of the component.
         */
        @Override
        protected String getMainComponentName() {
            return "App1";
        }
    }
    

    另外,我们需要实现一个MainApplication并添加如下代码:

    public class MainApplication extends Application implements ReactApplication {
    
      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }
    
        @Override
        protected List<ReactPackage> getPackages() {
          return Arrays.<ReactPackage>asList(
              new MainReactPackage()
          );
        }
    
        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };
    
      @Override
      public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
      }
    
      @Override
      public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
      }
    }
    

    上述代码的主要作用是为ReactActivity提供ReactNativeHost,查看源码你会发现在ReactActivity中使用了ReactActivityDelegate,在ReactActivityDelegate中会用到MainApplication中提供的ReactNativeHost:

     protected ReactNativeHost getReactNativeHost() {
        return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost();
    }
    

    另外实现了MainApplication之后需要在AndroidManifest.xml中添加MainApplication:

     <application
            android:name=".MainApplication"
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            ...
    

    以上就是通过继承ReactActivity的方式来作为RN容器的。

    那么这两种方式各有什么特点:

    • 通过ReactInstanceManager的方式:灵活,可定制性强;
    • 通过继承ReactActivity的方式:简单,可定制性差;

    五. 运行React Native

    经过上述的步骤,我们已经完成了对一个现有Android项目RNHybridAndroid添加了RN,并且通过两种方式分别创建了一个RNPageActivity与ReactPageActivity的Activity来加载我们在JS中注册的名为App1的RN 组件。

    接下来我们来启动RN服务器,运行RNHybridAndroid项目打开RNPageActivity或ReactPageActivity来查看效果:

    npm start
    

    在RNHybrid的根目录运行上述命令,来启动一个RN本地服务:
    然后我们打开AndroidStudio,点击运行按钮或者通过快捷键Ctrl+R来将RNHybridAndroid安装到模拟器上:

    六. 添加更多React Native的组件

    我们可以根据需要添加更多的React Native的组件:

    import { AppRegistry } from 'react-native';
    import App from './App';
    import App2 from './App2';
    
    AppRegistry.registerComponent('App1', () => App);
    AppRegistry.registerComponent('App2', () => App);
    

    然后,在Native中根据需要加载指定名字的RN组件即可。

    七. 调试、打包、发布应用

    打包

    虽然,通过上述步骤,我们将RN和我们的RNHybridAndroid项目做了融合,但打包RNHybridAndroid你会发现里面并不包含JS部分的代码,如果要将JS代码打包进Android Apk包中,可以通过如下命令:

    react-native bundle --platform android --dev false --entry-file index.js --bundle-output RNHybridAndroid/app/src/main/assets/index.android.bundle --assets-dest RNHybridAndroid/app/src/main/res/
    

    参数说明

    • –platform android:代表打包导出的平台为Android;
    • –dev false:代表关闭JS的开发者模式;
    • -entry-file index.js:代表js的入口文件为index.js;
    • –bundle-output:后面跟的是打包后将JS bundle包导出到的位置;
    • –assets-dest:后面跟的是打包后的一些资源文件导出到的位置;

    提示:JS bundle一定要正确放到你的Android言语的assets目录下这个和我们上文中配置的setBundleAssetName(“index.android.bundle”)进行对应。

    发布应用

    通过上述步骤我们完成了将RN代码打包并生成JS bundle,并放到了assets目录下,接下来我们就可以来通过Android Studio或者命令的方式来release我们的RN混合Android应用了。

    转自:
    http://www.devio.org/2018/08/26/React-Native-Hybrid-Android/

    展开全文
  • React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架,可以同时支持iOS和Android两大移动平台。那有人会问,除了可以开发移动跨平台应用,那能不能使用React Native...

    概述

    React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架,可以同时支持iOS和Android两大移动平台。那有人会问,除了可以开发移动跨平台应用,那能不能使用React Native开发桌面客户端应用呢?答案是肯定的。

    如果有使用React Native开发桌面应用的需求,那么可以参考下微软推出的
    React Native for Windows + macOS技术。React Native for Windows + macOS是微软在React Native 框架的基础上开发的一套使用React前端技术来开发桌面应用的技术,它们在GitHub上的地址分别为:react-native-windows
    在这里插入图片描述
    react-native-macos
    在这里插入图片描述
    目前,最新版本是0.61,而React Native的最新版本是0.62.2,以下是React Native for Windows + macOS的历史版本。
    在这里插入图片描述

    react-native-macos

    相较于早期的react-native-windows项目,react-native-macos 是最新才发布的,在前不久的微软365大会才正式为人所知晓。

    环境要求

    想要使用react-native-macos来开发Mac 桌面应用,那么需要具备如下环境:

    • 一台安装了macOS系统的,可以编译本地代码的苹果电脑。
    • 安装Xcode 11.3.1及以上版本。
    • 确保安装了Xcode的命令行工具,你可以打开Xcode的"Preferences…" ,然后再Locations面板中安装这一工具。
    • 安装 CocoaPods,如果没有安装,那么可以使用“sudo gem install cocoapods”命令进行安装。
    • 其他React Native需要的环境,如Node、Watchman等,可以使用如下的命令进行安装。
    brew install node
    brew install watchman
    

    基本使用

    react-native-macos和React Native的使用过程类似,首先,我们使用如下的命令创建一个React Native for macOS应用。

    npx react-native init <projectName> --version 0.61.5
    

    等待上面的命令执行成功后,使用cd命令进入项目,如下所示。

    cd <projectName>
    

    然后,安装 React Native for macOS所需的依赖包,如下所示。

    npx react-native-macos-init
    

    然后,更新你的CocoaPods版本,命令如下:

    cd macos && pod install && cd ..
    

    最后,使用react-native run-macos命令运行项目即可。

    npx react-native run-macos
    

    当然,你也可以使用Xcode打开React Native工程下的macos项目,然后使用Xcode运行。

    React Native for Microsoft Surface Duo

    在微软365大会上,微软还演示了如何使用Java和Kotlin,Xamarin和C#以及Unity游戏在Microsoft Surface Duo上构建双屏应用。 而今天我们要讲的是如何使用JavaScript和TypeScript来开发React Native应用。

    Microsoft Surface Duo是微软发布一款基于Android的折叠移动设备,如下图所示。
    在这里插入图片描述

    首先,您首先需要下载并安装Surface Duo模拟器。 如果您已经使用React Native开发Android应用程序,则应具备所有必要的先决条件,并准备构建双屏应用程序。接下来,你可以按照React Native入门说明,您将通过运行以下命令来启动新项目。

    npx react-native init AwesomeProject
    

    然后启动Surface Duo模拟器,并且使用以下命令运行React Native项目:

    cd AwesomeProject
    npx react-native run-android
    

    等待项目启动成功之后,就会在模拟器中看到跨越两个屏幕,如下图所示。
    在这里插入图片描述
    在这里插入图片描述
    React Native双屏SDK是开源的,因此您可以看到为Surface Duo带来双屏功能的代码。 SDK中有两个模块:DualScreenInfo和TwoPaneView。具体参考,微软跨平台开发React Native概述

    React Native DualScreenInfo

    DualScreenInfo是一个非视觉帮助程序,它提供有关设备的信息,以便您的代码和布局可以适应双屏显示。 它包含以下方法:

    • isDualScreenDevice –在访问其他双屏特定的API之前,请选中此复选框。
    • isSpanning –应用程序是在一个还是两个屏幕上。
    • windowRects –两个显示矩形的边界(不包括铰链区域)。
    • didUpdateSpanning –事件监听器,因此当应用程序跨度移动或移动到单个屏幕时,您的代码可以响应。

    这些API可用于在React Native应用程序中构建出色的自定义体验。 按照安装说明获取软件包,使用前请确保正确配置了Android项目。 包含的示例包含MasterDetail,CompanionPane和TwoPage选项-取消对App.tsx中的每个注释的注释,以进行尝试。

    在这里插入图片描述

    React Native TwoPaneView

    TwoPaneView控件为构建双屏应用程序提供了其他帮助, 要将其添加到您的应用中,请首先按照dualscreeninfo说明进行Kotlin和活动配置,然后使用npm install react-native-twopaneview命令来安装模块。

    您可以使用此处显示的标记创建动态布局,如下所示。

    <TwoPaneView panePriority={this.state.panePriority} panePriorityVerticalSpanning={this.state.panePriority} >
        {/* Pane A */}
        <MasterContent/>
        {/* Pane B */}
        <DetailContent/>
    </TwoPaneView>
    

    布局的panePriority和其他功能使您可以控制每个屏幕配置中显示的内容。 Windows TwoPaneView文档和API参考提供了有关控件工作方式的一些提示,这些模块可以在React Native双屏示例中看到。

    在这里插入图片描述

    参考文档:React Native apps for Microsoft Surface Duo

    展开全文
  •  有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。 先看一下我集成完之后的项目目录: 首先安装React Native node组件  1、新建一个文件夹如目录中的RN,这个...
  • React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。 混合开发的一些其他应用...
  • 直播开发的前端实现Web的实现(Web PC、Web App)React Native说明写在最后 Web的实现(Web PC、Web App) // 这里使用了flv.js <script src="./flv.min.js"></script> <video id="videoElement"><...
  • 一,首先检查环境,ReactNative(一下简称:RN)开发,必要环境。 等等,在这里我必须强调,RN开发有两种模式,一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多),二是CRNA(create react ...
  • 毕业后曾在酷我音乐、人人游戏、腾讯等互联网公司从事 Web 开发及游戏开发;2015 年先后担任成都鱼说科技大前端技术总监和 CTO 职位;2017 年初创办漫极客科技,致力于人工智能产品开发。课程简介本课程主要讲解 ...
  • 一、了解index.ios.js大家都清楚,React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发开发效率高、发布能力强,不仅拥有hybrid的开发效率,同时拥有native app相媲美的用户体验。目前...
  • 移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性...
  • 一、ReactReact.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发...
  • 一、ReactNative简介ReactNative是移动端目前最热的框架之一, 着力于提高多平台开发开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)。Facebook 已经在多项产品中使用了React Native,...
  • 近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、新版本的升级体验、还有新支持的 React...
  • React Native 开发工具

    2019-04-07 13:46:54
    React Native Develop Tool 开发工具提供 自动补全、语法检查, 方便我们开发。 1、* Atom + Nuclide + watchman * (1)Atom 是github专门为程序员推出的一个跨平台文本编辑器。 具有简洁和直观的图形用户...
  • 在0.44版本之前,开发者可以直接使用官方提供的Navigator组件来实现页面的跳转,不过从0.44版本开始,Navigator被官方从react native的核心组件库中剥离出来,放到react-native-deprecated-custom-components的模块...
  • 完全征服React Native

    2018-10-22 21:38:05
    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识...
  • 自从2015年4月React Native 发布以来后,关于移动跨平台的话题就层出不穷,不管是大公司还是小公司都在开始使用React Native开发跨平台App。不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃...
1 2 3 4 5 ... 20
收藏数 33,701
精华内容 13,480
关键字:

native react 开发直播