ppt reactnative_reactnative 打开ppt - CSDN
  • H5、React NativeNative应用对比分析

    万次阅读 2016-01-06 13:07:46
    Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?使用React Native的...
    摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?使用React Native的正确姿势又是怎样呢?

    H5、React Native、Native应用对比分析

    离上次在北京开源中国盛典已经快一个月了,有点想念@oschina的小伙伴了。我必须承认oschina是国内最大的同性社交网站,这也是无可争议的事实,但是,我真想的是妹子!!![偷笑]。从上次演讲后,有一些同学陆陆续续问我演讲的PPT在哪,还有不少同学希望看到[手稿],这学习精神,在下实在是佩服啊。有着这么热情的小伙伴,我激动不已啊,所以在此公布[手稿],方便大家可以将[PPT]和[手稿]双手齐下,:)。2015年,我们要一起努力完成以前吹过的牛逼.....  下面是[多图预警],请考虑切wifi,土豪请无视我,也可拿红包砸我,:)   

    ---------------华丽丽的分割线,主题开始---------------------

    “存在即合理”。凡是存在的,都是合乎规律的。任何新事物的产生总要的它的道理;任何新事物的发展总是有着取代旧事物的能力。React Native来的正是时候,一则是因为H5发展到一定程度的受限;二则是移动市场的迅速崛起强调团队快速响应和迭代;三则是用户的体验被放大,用户要求极致的快感,除非你牛x(例如:12306最近修改手机号需要用户自己发短信接收验证码)。

    以下简单的介绍下H5、React Native、Native的含义

    最近三四年间,国内外的前端与全栈开发者社区都在坚持不懈地追寻使用JavaScript与HTML、CSS技术体系开发App内场景的核心工程技术。这种技术,在国内很多公司与团队中,被通称为H5。——童遥

    这段是取自@童老师给小二我新书作的序,没有断章取义的意思。很清楚,H5并不是狭义的HTML5新标签和API,而是工程化的“In App” technology。

    iOS/Android ——原生应用(都懂得,不解释)。

    React Native —— React & Native ,应运而生!

    一、React Native的出现

    React Native的出现,似乎是扛起的反H5的旗子。就像当年Facebook放弃H5,全部转向Native一样。这一点,我们需要认同和保持高度的清醒。那么,React Native是否又是在吞食Native的领地呢?技术的发展,是用户风向标的导向起的作用。任何一门技术的出现,都是当时用户需求的体现。

    我们应该从以下几点看待React Native的出现。

    "鉴往知来"——从过去的教训中总结经验,从用户的角度开拓未来,用户更希望产品迭代和稳定寻求一种平衡
    “HTML5差强人意,但是与原生应用相比还是有些差距”——为了更高的追求! 用户体验!
    “人才宝贵,快速迭代”——Web开发者相对较多,寻找平衡点
    “跨平台!跨平台!跨平台!”——单一技术栈,开发者的福音
    “xx是世界上最好的语言” ——工程学的范畴,没有最好,只有最适合,我还是补充一句,JS还是很好很好的。

    HTML5 vs React Native ? HTML5 : React Native
    结论(React Native):
    1、原生应用的用户体验
    2、跨平台特性
    3、开发人员单一技术栈
    4、上手快,入门容易
    5、社区繁荣

    二、3款应用效果

    注:以下所有对比均在iOS平台下



    上面3张图片,如果去掉第一张图的“HybirdApp”的字样,是否分得清哪个是React Native开发?哪个是Native应用。
    你的第一感觉是什么?

    三、工程方案

    为了评估3种方案的技术优势和弱势。我们需要开发功能大致相似的App。这里,我们使用了“豆瓣”的API来开发“豆搜”应用。该应用能够搜索“图书”、“音乐”、“电影”。想当年,豆瓣以“图书评论”走红,尤其是12年当红!豆瓣是一个清新文艺的社区,一个“慢公司”。最近有一则网传消息,注意是网传——“传京东投1.5亿美元控股豆瓣”。今天,不聊豆瓣,我们要聊一个工程化的问题。

    我们需要将3款App的功能做到一致,同时需要保持技术要点一致。比如React Native这里使用了TabBar,那么Native我们也必须使用TabBar。简单而言就是:功能一致,组件 & API一致。我们功能如下图所示:

    1、H5方案
    在H5/Hybird应用中,我们使用AngularJS开发单页webApp,然后将该WebApp内嵌入到iOS WebView中,在iOS代码中,我们使用Navigation稍微控制下跳转。
    WebApp地址:http://vczero.github.io/search/html/index.html
    WebApp项目地址:https://github.com/vczero/search (很简单的一个项目)
    H5/Hybird项目地址:https://github.com/vczero/search_Hybird

    2、React Native
    在React Native中,封装必要的功能组件。
    项目地址:https://github.com/vczero/React-Dou。
    项目结构如下图:

    3、Native(iOS)
    使用React Native大致相同的组件开发App,不使用任何第三方库,代码布局。
    项目地址:https://github.com/vczero/iOS-Dou

    四、对比分析

    很多时候,新技术的采用最希望看到的是数据,而不是简单说“用户体验棒,开发效率高,维护成本低”。不过,生活中也有这样的同学,知一二而能窥全貌。当然,本人生性胆小,也没有那么多的表哥和隔壁的老王,所以不敢早下定论,不敢太放肆。赵本山在《大笑江湖》中有句名言“May the force be with you”(别太放肆,没什么用)。因此,从以下几个方面做一个简单的对比。

    ---------------分析提纲----------------

    1、开发方式

    (1)代码结构
    (2)UI布局
    (3)UI截面图
    (4)路由/Navigation
    (5)第三方生态链

    2、性能 & 体验

    (1)内存
    (2)CPU
    (3)动画
    (4)安装包体积
    (5)Big ListView
    (6)真机体验

    3、更新 & 维护

    (1)更新能力
    (2)维护成本
    -----------------提纲---------------

    1、开发方式

    很多人说React Native的代码不好看,不好理解。那是因为前端工程师都熟悉了Web的开发方式。怎么解决这个问题呢,可以先看看iOS代码,断定不熟悉iOS的同学心里会默念“一万匹**马奔腾”。那时候,你再看React Native,你会觉得使用React Native开发App是件多么美好的事!OK,我们先来看下三者在开始“一款简单App”的代码结构。
    (1)代码结构
    H5/Hybird的开发模式,我们需要维护3套代码,两套是Native(iOS/Android)代码,一套是WebApp版本。这里,我们使用AngularJS作为WebApp单页开发框架。如下图所示。

    在React Native中,同样需要关注部分的Native代码,但是大部分还是前端熟悉的JavaScript。在“豆搜”应用中,代码结构如下:

    在Native开发中,更加强调Native开发者的能力。平台是:iOS/Android。

    结论:从前端角度而言,React Native跨平台特性,不要开发者深入的了解各平台就能开发一款高效App。同时,语言层面而言,JavaScript运用很广泛,入门门槛相对较低。React Native虽然抛弃了MVC分离实践,但是从业务角度而言,更为合理。一切而言:对前端,对移动领域是利好的消息。

    (2)UI布局
    “面容姣好”,合理的UI却总是跟着时间在变。那么UI布局就不是小事。
    Web开发布局目前大多是 DIV + CSS。
    React Native的布局方式是Flexbox。

       //JSX
      <ScrollView style={styles.flex_1}>
        <View style={[styles.search, styles.row]}>
          <View style={styles.flex_1}>
            <Search placeholder="请输入图书的名称" onChangeText={this._changeText}/>
          </View>
          <TouchableOpacity style={styles.btn} onPress={this._search}>
            <Text style={styles.fontFFF}>搜索</Text>
          </TouchableOpacity>
        </View>
        {
          this.state.show ?
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this._renderRow}
            />
          : Util.loading
        }
      </ScrollView>
      //样式
      var styles = StyleSheet.create({
          flex_1:{
            flex:1,
            marginTop:5
          },
          search:{
            paddingLeft:5,
            paddingRight:5,
            height:45
          },
          btn:{
            width:50,
            backgroundColor:'#0091FF',
            justifyContent:'center',
            alignItems:'center'
          },
          fontFFF:{
            color:'#fff'
          },
          row:{
            flexDirection:'row'
          }
        });

    而Native布局就有种让你想吐的感觉,尤其是iOS的布局。这里不是指采用xib或者Storyboard,而是单纯的代码,例如添加一个文本:

    UILabel *publisher = [[UILabel alloc]init];
    publisher.frame = CGRectMake(bookImgWidth + 10, 50, 200, 30);
    publisher.textColor = [UIColor colorWithRed:0.400 green:0.400 blue:0.435 alpha:1];
    publisher.font = [UIFont fontWithName:@"Heiti TC" size:13];
    publisher.text = obj[@"publisher"];
    [item addSubview:publisher];

    总结:React Native既综合了Web布局的优势,采用了FlexBox和JSX,又使用了Native原生组件。比如我们使用一个文本组件。
    <Text style={{width:100;height:30;backgroundColor:'red'}}>测试</Text>

    (3)UI截面图
    Hybrid方式截面图

    可以看到第一层列表页是完整的布局,实际上这就是Web页面;而第二层灰色的是Native的WebView组件。
    iOS UI截面图


    可以看到Native页面的组件特别多,即使是列表页,其中某一项都是一个组件(控件)。

    当然,我们就会想,能够完全调用原生组件呢?那样性能是否更好?
    React Native UI截面图


    可以清楚的看到React Native调用的全部是Native组件。并且层次更深,因为React Native做了组件的封装。如上图,蓝色边框的就是RCTScrollView组件。这就是React Native相比H5更高效的原因。

    (4)路由/Navigation
    在Web单页面应用中,路由由History API实现。
    而React Native采用的路由是原生的UINavigationController导航控制器实现。
    React Native NavigatorIOS组件封装程度高;Navigator可定制化程度高。
    Navigator方法如下:

    getCurrentRoutes() - returns the current list of routes
    jumpBack() - Jump backward without unmounting the current scene
    jumpForward() - Jump forward to the next scene in the route stack
    jumpTo(route) - Transition to an existing scene without unmounting
    push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
    pop() - Transition back and unmount the current scene
    replace(route) - Replace the current scene with a new route
    replaceAtIndex(route, index) - Replace a scene as specified by an index
    replacePrevious(route) - Replace the previous scene
    immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
    popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
    popToTop() - Pop to the first scene in the stack, unmounting every other scene

    相对Native而言,这些接口更Native还是很相似的。

    //iOS UINavigationController  
    //相对Web而言,不用自己去实现路由,并且路由更加清晰         
    [self.navigationController pushViewController:detail animated:YES];

    "豆搜" WebApp路由(基于AngularJS)如下:

    "豆搜" React Native版本导航如下:

    "豆搜" iOS版本导航代码如下:

    总结:React Native封装的导航控制更容易理解。

    (5)第三方生态链
    “我的是我的,你的也是我的。 ”——我不是“疯狂女友”,我是React Native!
    我们缺少“城市列表”组件,OK,使用JSX封装一个;觉得性能太低,OK,基于React Native方案封装一个原生组件。
    这个iOS图表库不错,拿来用呗! => 完美!
    这一切都是基于React Native提供的模块扩展方案。
    所以说:iOS第三方库 + 部分JavaScript库 = React Native 生态库(可以知道,基于React Native的扩展方案是多么方便)

    2、性能 & 体验

    我们都很关注一款App性能。因此测试和体验App的性能很重要。以下测试,都是基于相同的case。
    测试平台:模拟器,iphone6,iOS8.4
    (1)内存
    首先,我们来看下Native应用占用的内存情况。一开始,原生应用启动后,占用内存是20~25M;针对相同的case,跑了2min,结果如下图:

    可以看出,峰值是87.9M,均值是72M;内存释放比较及时。

    我们再来看下Hybird App的情况。App已启动,占用内存35~55M;同样,跑了2min以上,结果如下图:

    可以看出,峰值在137.9M,因为整个应用在WebView中,内存释放不明显,存在缓存。

    最后,看下React Native的情况。App启动占用内存35~60M,同样跑2min以上,结果如下图:

    可以看出,峰值在142M,内存相对释放明显。

    总结:React Native和Web View在简单App上相差不大。二者主要:内存消耗主要是在网页数据上。

    (2)CPU
    我们可以看一下Native应用程序CPU的情况,最高值在41%。

    Hybird App的最高值在30%。

    React Native的最高值在34%。

    总结:CPU使用率大体相近,React Native的占用率低于Native。

    (3)动画
    React Native提供了Animated API实现动画。简单效果,基本OK。个人觉得React Native不适合做游戏,尤其布局能力。
    Native Animation提供UIView动画
    H5/Hybird:采用js动画能力
    总结:React Native Animated API / 封装Native动画库 可以满足基本需求

    (4)安装包体积
    Hybird App:
    34(App壳) + 5(HTML) + 125(Angular) + 29(An-route) + 6(min.js) + 4(min.css) = 203 KB。

    React Native:
    不含bundle: 843KB
    含bundle: 995KB

    Native
    83KB

    React Native框架包大小
    843(不含bundle) - 32(Hybird_app空壳,初识项目) = 811KB

    相比快速迭代和热更新,比Native多了811KB一点都不重要,我们将图片素材、静态资源线上更新缓存起来即可减少很多体积。
    总结:牺牲一点体积,换更大的灵活性!(世界上哪有那么美的事,除非丑,就会想得美,:) )。

    (5)Big ListView & Scroll 性能
    循环列表项500次: H5页面惨不忍睹
    React Native还可以接受
    Native 采用UITabView更高效,因为不渲染视图外部分。

    (6)真机体验
    机型:iphone4s,iOS7
    Native > React Native > Hybird
    如果非要给个数字的话,那我个人主观感受是:
    Native: 95%+ 流畅度
    React Native: 85~90% 流畅度
    H5/Hybird: 70% 流畅度

    总结:Native/React Native的体验相对而言更流畅。

    3、更新 & 维护

    (1)更新能力
    H5/Hybird: 随时更新,适合做营销页面,目前携程一些BU全部都是H5页面;但是重要的部分还是Native。
    React Native:React Native部分可以热更新,bug及时修复。
    Native:随版本更新,尤其iOS审核严格,需要测试过关,否则影响用户。

    (2)维护成本
    H5/Hybird: Web代码 + iOS/Android平台支持
    React Native:可以一个开发团队 + iOS/Android工程师;业务组件颗粒度小,不用把握全局即可修改业务代码。
    Native:iOS/Android开发周期长,两个开发团队。

    总结:React Native 统一了开发人员技术栈,代码维护相对容易。

    五、综合

    1、开发方式

    (1)代码结构: React Native更为合理,组件化程度高
    (2)UI布局:Web布局灵活度 > React Native > Native
    (3)UI截面图:React Native使用的是原生组件,
    (4)路由/Navigation:React Native & Native更胜一筹
    (5)第三方生态链:Native modules + js modules = React Native modules

    2、性能 & 体验

    (1)内存:Native最少;因为React Native含有框架,所以相对较高,但是后期平稳后会优于Native。
    (2)CPU:React Native居中。
    (3)动画:React Native动画需求基本满足。
    (4)安装包体积:React Native框架打包后,811KB。相比热更新,可以忽略和考虑资源规划。
    (5)Big ListView
    (6)真机体验:Native >= React Native > H5/Hybrid

    3、更新 & 维护

    (1)更新能力: H5/Hybird > React Native > Native
    (2)维护成本: H5/Hybird <= React Native < Native

    React Native定制难度相比Native有些大;但是具备跨平台能力和热更新能力。      

    说了这么多,最后个人建议:

    一个新的App完全可以采用React Native开发,这样成本会低很多。    

    关于演讲:

    PPT: http://www.oschina.net/doc/24007

    视频:http://www.oschina.net/question/865233_2145334 (这个演讲在移动专场下半场开场)       

    六、图书 & 工作机会

    最后说一下图书《React Native入门与实战》吧。这是一本[难产]的家伙,15年写的比较顺利,最后因为北京雾霾,印刷厂偶尔停工,一直在难产。前段时间,图书发往各地书店,到店比较迟,我猜测是因为雾霾,找不到高速出口~~目前该书由人民邮电出版社图灵原创出版,已经开卖了。本书主要是希望带领大家一起进入React Native开发领域,针对每个API和组件都有详细的案例,同时为了更好的实战,最后3章以实际案例(通讯录App,LBS App,基于豆瓣OpenAPI的搜索 App)给出,供大家参考。觉得入门是完全没问题的,后期大家可以一起交流,争取丰富国内React Native社区。   

    《React Native入门与实战》各网站购买地址:

    京东:http://item.jd.com/10089810271.html (目前应该都有货了,微信有同学传照片给我看了,铁粉哈)

                http://item.jd.com/11844102.html (京东自营,货源需要跟客服确认哦)

    互动:http://product.china-pub.com/4904552 (已经有货)

    天猫:https://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.21.rc0yeu&id=525484671101&cat_id=2&rn=4690ef5b4e06412ffae4d1cc4f4dcc9a&user_id=1020536390&is_b=1 (天猫这家卖的还可以,不知道为啥京东看不到数据,京东应该才是技术买书的最爱啊,听说也预售了不少呢)

          

    展开全文
  • react native 集成现有的Android项目react native 目前相当的火爆,许多人都想试试,但一般情况下我们都不能从头就开始使用react native,比如 项目已经开发到一半了,不能把以前的工作推倒从来,只能继续在当前项目...

    react native 集成现有的Android项目

    react native 目前相当的火爆,许多人都想试试,但一般情况下我们都不能从头就开始使用react native,比如

    • 项目已经开发到一半了,不能把以前的工作推倒从来,只能继续在当前项目上开发
    • 大部分人来说react native经验不足,所以为了不影响项目进度,不会都用react native开发,一部分仍然在用原生开发
    • 改造以前的项目
    • react native还有一些解决不了的问题需要原生配合

    因此大部分时候我们需要react native和原生进行混合开发。

    现在我们已经有了原生的app,要集成react native有如下步骤:
    1、init一个react native项目:
    打开终端,进入到我们想创建项目的目录比如F:\test
    C:\Users\qw>f:
    F:>cd test
    F:\test>
    2、创建一个react native项目(前提是你已经安装好react native 环境)

    在终端输入

    react-native init test

    test为你的项目名称,下载项目中的:
    这里写图片描述
    项目下载完成:
    这里写图片描述

    打开项目目录看到如下目录:
    这里写图片描述
    android:存放原生android代码的地方。
    ios:存放原生ios代码的地方。
    index.android.js:android入口
    index.ios.js :ios入口

    修改android项目

    用android studio打开android目录下项目工程,可以看到:
    这里写图片描述

    集成react native 需要如下几个步骤:

    • 合并build.gradle配置文件
    • 合并Application

    合并project build.gradle配置文件

    这里写图片描述

    合并app build.gradle配置文件

    这里写图片描述
    这里写图片描述
    图中标红的地方和现有项目合并。

    合并Application

    这里写图片描述
    将上图中MainApplication中红框代码添加项目application中。

    最后一步,将我们的app项目拷贝到react native 的 android下(先把次目录下所有文件删除)。

    用android studio重新打开 react native项目下android工程,并且build一下,编译通过的话此时你依然可以用以前开发原生的方法直接运行app,和以前没有任何区别,当然有的人可能会出现下面异常:
    这里写图片描述

    解决办法:在 app build.gradle中添加:multiDexEnabled true

    这里写图片描述

    有人会问了,react native在哪呢,别急,下面我们用react native方式运行一下:
    在终端进入react native项目目录,

    react-native run-android

    这里写图片描述

    出现如上画面代表我编译成功并且此时app已经安装到我们的手机上,在最后我们发现提示找不到MainActivity,这个没有关系,react默认打开这个activity,但我们自己的app并没有这个activity,所以找不到,手动打开app即可,什么也不影响。
    打开app后我们发现和用原生运行没任何区别啊,是当前环境只是让我们原生app有了开发react native的环境。
    后面我会具体介绍如何在这基础上开发react native。第一次搭建环境可能会遇到各种问题,尤其是墙,建议大家npm使用淘宝的代理,可百度:npm 淘宝镜像。有什么问题大家可以在评论留言。

    展开全文
  • 本文原创首发于公众号:ReactNative开发圈,转载需注明出处。 React Native 文档查看组件:react-native-doc-viewer,可以在手机上直接打开文档,支持远程和本地文档。支持的文档格式:xls,ppt,doc,xlsx,pptx,docx,...
        

    本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

    React Native 文档查看组件:react-native-doc-viewer,可以在手机上直接打开文档,支持远程和本地文档。支持的文档格式:xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf,mp4。支持iOS和Android。

    安装方法

    npm install react-native-doc-viewer --save
    react-native link react-native-doc-viewer

    API说明

    • openDoc 打开远程货或本地文档
    • openDocb64 打开Base64字符串格式文档
    • openDocBinaryinUrl 打开二进制文件
    • playMovie 打开视频文件

    clipboard.png

    使用示例

    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Platform,
        Button,
        Alert,
        ActivityIndicator
    } from 'react-native';
    import OpenFile from 'react-native-doc-viewer';
    var RNFS = require('react-native-fs');
    var SavePath = Platform.OS === 'ios' ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath;
    export default class Component02 extends Component {
    
        static navigationOptions = ({ navigation }) => ({
            title: `${navigation.state.params.name}`,
        });
    
        state = { animating: false }
        /*
        * Handle WWW File Method
        * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing.
        */
        handlePress = () => {
            this.setState({ animating: true });
            if (Platform.OS === 'ios') {
                OpenFile.openDoc([{
                    url: "https://calibre-ebook.com/downloads/demos/demo.docx",
                    fileNameOptional: "test filename"
                }], (error, url) => {
                    if (error) {
                        this.setState({ animating: false });
                    } else {
                        this.setState({ animating: false });
                        console.log(url)
                    }
                })
            } else {
                //Android
                this.setState({ animating: true });
                OpenFile.openDoc([{
                    url: "https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath
                    fileName: "sample",
                    cache: false,
                    fileType: "jpg"
                }], (error, url) => {
                    if (error) {
                        this.setState({ animating: false });
                        console.error(error);
                    } else {
                        this.setState({ animating: false });
                        console.log(url)
                    }
                })
            }
    
        }
    
    
        /*
        * Handle Local File Method
        * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing.
        */
        handlePressLocal = () => {
            this.setState({ animating: true });
            if (Platform.OS === 'ios') {
                OpenFile.openDoc([{
                    url: SavePath + "demo.docx",
                    fileNameOptional: "test filename"
                }], (error, url) => {
                    if (error) {
                        this.setState({ animating: false });
                    } else {
                        this.setState({ animating: false });
                        console.log(url)
                    }
                })
            } else {
                OpenFile.openDoc([{
                    url: SavePath + "demo.jpg",
                    fileName: "sample",
                    cache: false,
                    fileType: "jpg"
                }], (error, url) => {
                    if (error) {
                        this.setState({ animating: false });
                    } else {
                        this.setState({ animating: false });
                        console.log(url)
                    }
                })
    
            }
    
        }
    
        /*
        * Binary in URL
        * Binary String in Url
        * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions
        */
        handlePressBinaryinUrl = () => {
            this.setState({ animating: true });
            if (Platform.OS === 'ios') {
                OpenFile.openDocBinaryinUrl([{
                    url: "https://storage.googleapis.com/need-sure/example",
                    fileName: "sample",
                    fileType: "xml"
                }], (error, url) => {
                    if (error) {
                        console.error(error);
                        this.setState({ animating: false });
                    } else {
                        console.log(url)
                        this.setState({ animating: false });
                    }
                })
            } else {
                OpenFile.openDocBinaryinUrl([{
                    url: "https://storage.googleapis.com/need-sure/example",
                    fileName: "sample",
                    fileType: "xml",
                    cache: true
                }], (error, url) => {
                    if (error) {
                        console.error(error);
                        this.setState({ animating: false });
                    } else {
                        console.log(url)
                        this.setState({ animating: false });
                    }
                })
            }
        }
        /*
        * Base64String
        * put only the base64 String without data:application/octet-stream;base64
        * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions
        */
        handlePressb64 = () => {
            this.setState({ animating: true });
            if (Platform.OS === 'ios') {
                OpenFile.openDocb64([{
                    base64: "",
                    fileName: "sample.png",
                    fileType: "png"
                }], (error, url) => {
                    if (error) {
                        console.error(error);
                        this.setState({ animating: false });
                    } else {
                        console.log(url)
                        this.setState({ animating: false });
                    }
                })
            } else {
                OpenFile.openDocb64([{
                    base64: "",
                    fileName: "sample",
                    fileType: "png",
                    cache: true
                }], (error, url) => {
                    if (error) {
                        console.error(error);
                        this.setState({ animating: false });
                    } else {
                        console.log(url)
                        this.setState({ animating: false });
                    }
                })
            }
        }
    
        /*
        * mp4 Video
        */
        handlePressVideo(video) {
            this.setState({ animating: true });
            if (Platform.OS === 'ios') {
                OpenFile.playMovie(video, (error, url) => {
                    if (error) {
                        console.error(error);
                        this.setState({ animating: false });
                    } else {
                        console.log(url)
                        this.setState({ animating: false });
                    }
                })
            } else {
                this.setState({ animating: false });
                Alert.alert("Coming soon for Android")
            }
        }
    
        setToggleTimeout() {
            this.setTimeout(() => {
                this.setState({ animating: !this.state.animating });
                this.setToggleTimeout();
            }, 2000);
        }
    
        render() {
            return (
    
                <View style={styles.container}>
                    <ActivityIndicator
                        animating={this.state.animating}
                        style={[styles.centering, { height: 80 }]}
                        size="large" />
                    <Text style={styles.welcome}>
                        Doc Viewer React Native
            </Text>
                    <Button
                        onPress={this.handlePress.bind(this)}
                        title="打开远程文档"
                        accessibilityLabel="See a Document"
                    />
                    <Button
                        onPress={this.handlePressLocal.bind(this)}
                        title="打开本地文档"
                        accessibilityLabel="See a Document"
                    />
                    <Button
                        onPress={this.handlePressBinaryinUrl.bind(this)}
                        title="打开远程二进制文档"
                        accessibilityLabel="See a Document"
                    />
                    <Button
                        onPress={this.handlePressb64.bind(this)}
                        title="打开Base64字符串"
                        accessibilityLabel="See a Document"
                    />
                    <Button
                        onPress={() => this.handlePressVideo("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4")}
                        title="打开视频"
                        accessibilityLabel="See a Document"
                    />
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
        instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: 5,
        },
    });

    Screenshots

    clipboard.png

    示例源码

    GitHub - forrest23/ReactNativeComponents: React Native组件大全

    组件地址

    GitHub - philipphecht/react-native-doc-viewer: React Native Doc Viewer (Supports file formats: xls,ppt,doc,xlsx,pptx,docx,png,jpg,pdf)

    举手之劳关注我的微信公众号:ReactNative开发圈

    clipboard.png

    展开全文
  • 很高兴在今天下午与各位有这样一次关于驱动原生(React Native) 技术的交流。此次交流的内容,主要是我在Pworld2016 大会的讲解内容,本想比较真实的还原当时的情况,在各个设计群发出预告后,还是看到了很多不同的...

    图片描述

    很高兴在今天下午与各位有这样一次关于驱动原生(React Native) 技术的交流。

    此次交流的内容,主要是我在Pworld2016 大会的讲解内容,本想比较真实的还原当时的情况,在各个设计群发出预告后,还是看到了很多不同的理解。

    于是我对PPT的内容进行了增加和修改。

    很多工程师,包括前端工程师、甚至是移动前端工程师对于React Native 有很多误解。

    图片描述

    React Native 不是React,而且我认为Ta比React 技术更被广泛认可。

    就在不久Github官方发布的2016 开源报告中(感兴趣的,可以移步:https://octoverse.github.com

    ),React Native的活跃度排名第五,经常被国人搞混在一起的React 并没有取得这么多的关注。

    同时,《软件开发时代》杂志(SDTimes)回顾了2015年Github上十强中,ReactNative 排名第六。

    分享的主题是《React Native 移动技术在企业中的实践》。

    图片描述

    一、React Native 已成移动的技术主流方向

    图片描述

    * React Native 已成移动的技术主流方向,特别是移动跨平台领域内。*

    可能会有人提出疑问,跨平台技术最主流的不是hybrid技术吗?

    两年前,这个结论我认可,现在不敢苟同了。

    我认为Hybrid已经是上一代的跨平台技术了。

    就在上个月,CSDN举办的MDCC移动开发者大会专场上,大家不约而同的全部在分享驱动原生型的跨平台实战,而没有一个讲者再多提Hybrid。

    而下周InfoQ在上海举办的Qcon大会上从题目看,至少有两三场在分享驱动原生型(包括React Native、Weex)的移动开发,同样,一场Hybrid的都没有。

    React Native 的缘起

    图片描述

    说起React Native,不得不提到Facebook。

    Facebook创始人兼CEO马克·扎克伯格,在TechCrunch举办的Disrupt大会上,「专注在HTML5上面是他有史以来犯过的最大的错误。」

    解读这句话其实用后面一句更为客观:

    「Facebook最大错误是在 HTML5 上押注过大,在移动平台上浪费两年时间」

    就是在这种背景下,推出了React Native 的解决方案。

    图片描述

    React Native 已是一种移动前端技术流派

    从整个移动App前端技术的演进看,我认为,React Native成为一种技术流派。

    图片描述

    React Native 已是一种移动前端技术流派,我称之为驱动原生型的。

    无论React Native、或者Primeton Mobile以及Weex,他们从架构和实现的思路上不谋而合的走到了一起。基本上具备一下两个比较鲜明的特点。

    采用原生渲染,摒弃Webkit渲染,提升体验。
    
    采用Web语言作为基础开发语言,降低学习成本。
    

    事实上,这个技术最近两年已经得到了大量企业广泛的验证。

    图片描述

    互联网行业中,React Native 技术已经在腾讯、阿里、携程、58、Facebook等大型互联网公司核心App中大量采用。

    最近更新的案例列表表明,在Baidu(手机百度)、Instagram、JD(手机京东)等大型主流应用的iOS版本、Android中均已经采用。

    更有甚者,在VR、游戏等重体验的App也采用了,这充分说明了其用户的良好性。

    在企业中,React Native正在成为移动前端技术的首选。

    图片描述

    驱动原生技术在企业客户中广泛的使用,上图是部分客户的App,有兴趣可以自行下载,就不赘述。

    甚至,苹果 AppStore为此也修改了审核规则。

    图片描述

    在2015年7月28日的苹果 AppStore审核政策调整,从之前的不允许JavascriptCore ,而在这天之后删除此条款。

    允许运行JavascriptCore的动态加载代码,通过App Store 的审核。

    要知道,JavascriptCore 动态加载是驱动原生型(React Native )的实现原理。

    二、React Native 的利和弊

    React Native 通讯机制原理

    图片描述

    React Native的通信机制,可以简单总结为三句半。

    通过Javascript 的方式调用
    
    iOS/Android提供了js-Bridge
    
    最终通过iOS/Android 的控件进行渲染
    
    全过程,没有Webkit(浏览器)什么事儿(这半句是为了更好的解释其与Hybrid的区别)
    

    在说明其机制后,我们更加容易理解其优点。

    图片描述

    React Native 技术流派的三大优点

    体验好:彻底摒弃Webview,摆脱Webview的体验差、性能差的问题,这也是为什么大量采用Hybrid技术的转向RN。
    
    热更新:支持应用内热更新与动态显示,支持AppStore 上应用的热更新,相对于原生语言开发的App来讲,这一点更加的容易和灵活。
    
    原生能力:本地能力、原生能力调用方便,实现一个真正的MobileNativeApp,而不是一个Web App。
    

    举例说明上述的优点在业务上的价值

    图片描述

    正是因为RN技术对于体验上有超过HTML5渲染太多,大量主流核心App中也均采用RN进行了尝试。

    包括,QQ、QQ音乐、全面K歌、携程、手淘/手猫等主流核心应用均采用驱动原生技术进行了改造。

    当然最近58、美团、手机京东、Instagram、Airbnb,甚至手机百度等也都加入到了React Native的阵容。

    这无疑给正在抉择的人提升了信心。

    图片描述

    在保证了体验的同时,React Native技术让应用内冷热更新都成为可能。

    支持应用内,冷更新、热更新,减少对应用商店等渠道的依赖。
    
    Andriod、iOS,AppStore、in-house的全面支持
    

    上图中,最左侧的图,是手机淘宝的Andriod版的,非应用市场更新的界面,它采用的是应用内冷更新的方式,即,不需要经过市场,需要重启应用。

    实际上,采用驱动原生的方式,完全可以做到应用内热更新的效果,即不需要经过市场,不需要重启应用。如右图所示,做过移动App的人估计通过状态栏和沉浸式的效果就可以看出这个App是iOS版本的。

    本质上,这个优点可以大幅降低App的二次推广成本,全面提升新业务功能的客户达到率。

    图片描述

    随着移动互联网的深入发展,移动端已经不仅仅是简单的信息展示,越来越多的应用已经从移动展示发展到移动开展业务的场景。

    比较典型的是,银行的移动办理贷款、保险公司的移动展业等等,这就需要App端对于原生能力的使用更加深入,更大发挥移动的优势,强化交互性。

    而驱动原生的技术确实能够提供Hybrid方案难以完成的场景。

    上面讲述了其几大优点,实际上在使用React Native 落地的过程中,难免会遇到一些难道,我们稍微总结了一些其弊端。

    图片描述

    React Native 技术的三大待提升点

    其本身不夸平台,需要多个平台、多套代码,这回导致实施成本和维护成本提高。
    
    其开发期强依赖于React语法,导致传统企业人员学习成本增加。实际上正如我之前说的那样,我认为React的接受度远不及React Native的接受度,让一个超级流行的项目依赖一个不及它的项目,这本身就是一个值得商榷的地方。当然React 也是一个不错的东西啦。
    
    React Native从技术纬度,在前端并没有提供精细化的能力,缺少微应用的支持。特别是在企业中,实施企业App,无法快速响应岗位调整,同时难以针对多供应商、多团队并行研发。
    

    三、我们的一些实践

    图片描述

    首先,我们进行了跨平台的尝试,通过一套代码支持多种操作系统,支持屏幕自动适配的问题。

    其实,我们采用了标准Web语法(HTML/CSS/Javascript),作为开发期语言,从而低昂迪企业人员学习成本。

    再次,无论是开发期,还是运行态,支持MicroApp,方便面向岗位、职位,体现App功能。同时也方便进行多开发团队、多提供商团队并行工作模型的支持。

    图片描述

    我们通过上层封装,通过一套代码可以支持iOS、Android的并且多屏适配、甚至多屏同时调试的支持。

    调试视频地址:http://video.weibo.com/show?fid=1034:4aa1a7b8e42d1755faa6e0ad5da18d9c
    图片描述

    采用标准Web语法(HTML/CSS/javascript),降低学习成本。

    HTML用于布局、控件及属性设置等
    
    CSS用于样式设置
    
    Javascript 用于数据设置、交互响应等
    

    图片描述

    全面支持微应用模型,以微应用作为开发期、运行期的管理单元,更适合企业大规模使用。同时带来以下的好处:

    采用微应用的方式进行上线运营,可以有效提高业务响应度、提升运营的精细化
    
    以微应用的方式进行更新、管理和监控,可以提升运营效率
    
    通过微应用市场的方式,用户自行定义可使用功能,提升体验
    
    微应用的添加方便结合权限控制,提升运营的管控性和功能友好性
    

    图片描述

    同时,支持跨地域拖团队、多供应商并行工作模式,方便多级创新。

    由于时间和篇幅的限制,上述的特点没有展开讨论,如果大家有兴趣可以补充参考以下我在MDCC(移动开发者大会),跨平台专场上的分享。

    具体的PPT,可从http://special.csdncms.csdn.net/MDCC2016/ 获取

    四、总结和展望

    图片描述

    无论互联网公司还是企业,React Native已经成为主流
    
    React Native 具备体验好、热更新、原生能力等优势
    
    基于RN,可以完善跨平台、Web语法、微应用等各种能力
    
    面向大中型企业,React Native 更方便对各类业务的支撑
    

    讲师博客:http://blog.csdn.net/haozhenming

    普元云计算专区:http://primeton.csdn.net/m/zone/primeton/index#

    普元公众号:

    图片描述

    展开全文
  • 随着移动端开发和React的流行,越来越多的人想要学习React Native。本文将向你推荐一些自学React Native的恳切建议,介绍一些关于React Native的学习资源,并推荐一些简单实用的开发工具。相信只要按照本文所述的...
  • 本篇前两部分内容简单介绍一下ReactNative,后面的章节会把整个RN框架的iOS部分,进行代码层面的一一梳理 全文是不是有点太长了,我要不要分拆成几篇文章 函数栈代码流程图,由于采用层次缩进的形式,层次关系比较...
  • PPT-React-native介绍

    千次阅读 2015-12-03 21:03:41
    转自: http://wenku.baidu.com/link?url=-SLitykMKjyZKql2a31LVqnnQSk0yzS8GLMTFYFEiGwNKVbnhed466Z0G5QCXkg3Z8BLAsnJNtAwn8lUG7G-N7382J1dTEdV_RCpbgI9iZS powerpoint 讲得挺详细,大家可以看看
  • React Native下载打开pdf文件

    千次阅读 2017-11-20 08:48:53
    本文原创首发于公众号:ReactNative开发圈,转载需注明出处。http://mp.weixin.qq.com/s/rS-4XppSPMKfSwrwUvmtLw 使用到的组件 react-native-fs 文件下载组件 GitHub - johanneslumpe/react-native-fs: ...
  • react-native 的简介

    千次阅读 2016-05-24 11:25:28
    React-native是什么 react-native是一个可以使用 JavaScript 来开发 iOS和 Android原生应用( app )的框架。...2、ReactNative 使你能够使用基于JavaScript 和 React ,在本地平台上构建世界一流的应用程序体验...
  • 我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid app开发技术方案:RN(react native),HBuilder。React Native是大名鼎鼎的Facebook的开源技术框架,而HBuilder是国内的H5工具开发公 ...
  • PPT、速记和现场演讲视频等参见“七牛架构师实践日”官网。 嘉宾:卜赫,七牛云布道师。 责编:钱曙光,关注架构和算法领域,寻求报道或者投稿请发邮件qianshg@csdn.net,另有「CSDN 高级架构师群」,内有诸多...
  • React Native技术周报一

    2016-06-25 10:47:37
    React Native技术周报一(一)最新资讯1、React Native 0.28正式版发布 更新NavigationExperimental,移除PullToRefreshAndroid中的部分方法以及布局中的一些属性调整 2、GMTC全球移动技术大学演讲PPT下载合集,...
  • 1ReactNative源码篇:源码初识2ReactNative源码篇:代码调用3ReactNative源码篇:启动流程4ReactNative源码篇:渲染原理5ReactNative源码篇:线程模型6ReactNative源码篇:通信机制 源码地址:ht
  • 进击ReactNative-疾如风

    2019-01-27 21:42:43
    情境(Situation) 约法三章 三问 三看 向后看 向外看 向前看 三思 思危 思退 思变 三愿 冲突(Complication) 疑问(Question) 5W2H分析法 答案(Answer) ... Ja...
  • react 这个引用方法 import和require 必须传递相对路径,不便于移动应用开发,本人实在受不了这种引用方式,而且require加载图片,不能是变量,很烦人,我给出一种映射解决办法 上面这种图片引用方式实在太痛苦,我给出...
  • 先上一个ppt,不过好像要翻墙,内容跟本文基本一致,看不到可以先忽略 这里是我临时写的一个React Native的试水项目,打开后等会会看到gif动画演示。 https://github.com/xinyu198736/htmljs-ReactNative ...
  • 图解 ReactNative 原理,深度好文。
1 2 3 4 5 ... 20
收藏数 1,110
精华内容 444
热门标签
关键字:

ppt reactnative