• Cordova 和 React-Native 是使用 Web 开发移动端的两大框架。 Cordova 是 Apache 旗下的。 React-Native 是 Facebook 旗下的在2013年发布的一个前端框架。两者皆开源。 下面的内容主要记录了这两大框架的优劣。...

    Cordova 和 React-Native 是使用 Web 开发移动端的两大框架。 Cordova 是 Apache 旗下的。 React-Native 是 Facebook 旗下的在2013年发布的一个前端框架。两者皆开源。 下面的内容主要记录了这两大框架的优劣。以及移动端开发中有关 WebView 比较可行的几种选择。 Cordova文档 , React-Native文档 。

    对比 
    跨平台特性

    • Cordova: write once, run anywhere ( 一次开发,随处运行)
    • React-Native: Learn once, write anywhere ( 一次学习,随处开发)

    功能支持

    • Cordova: 基本功能完全具备,对于底层,如摄像头之类的,需要插件。
    • React-Native: 完全支持。 Android 端不是很完善。

    风险程度

    • Native 比 cordova 高。

    开发成本

    • Cordova: 完全基于 html,css,js 。写一次代码,两个平台都适用。
    • React-Native: 具有相同语法体系,但需要根据不同平台编写不同代码。

    运行速度

    • Cordova: 相对较慢
    • React-Native: 跟 Native 基本相当

    WebView问题 
    因为 Android WebView 和 iOS 的 UIWebView 内存泄露的问题。所以在选择内核的时候,使用原生的 WebView 内存泄露很明显。并且不易解决。 IOS8+ 之前,同样有大量内存泄露。分别看一下Android和IOS系统比例图:

    • Android 
      这里写图片描述
    • IOS 
      这里写图片描述

    如果要考虑 Android4.4 以下的设备和 IOS8+ 设备。因为前后的运行内核不一。性能不一。以及国内厂商对于系统的深度定制,不同的渲染。 app 最好有专门的内核。保证拥有一致性的体验。有如下几个选择:

    使用 Crosswalk 开源 web 引擎。 
    优势

    1. 更丰富的 HTML5 特性支持。包括 WebGL,WebAudio,WebRTC,Gamepad,WebSocket 等等。
    2. 使用 Crosswalk 可以保持平台的一致性。 劣势

    3. 打包后的 app 体积增加 20M-30M 。

    4. Crosswalk lite 针对上面第一条, CrossWalk 提出了 Shared 
      Mode 和 Crosswalk lite 解决方案。体积可以减少到只增加10M左右。

    使用腾讯 TBS 浏览服务 
    优势

    1. 速度快:相比系统 webView 的网页加载速度有近30%的提升。
    2. 大小只有 253K。
    3. 省流量:云端优化技术使流量节省20%。
    4. 更安全:24小时安全问题解决机制。
    5. 更稳定:经过亿级用户的使用考验,CRASH率0.15%。
    6. 集成强大的视频播放器,支持各种视频格式直接打开。
    7. 适屏排版、字体设置等浏览增强功能的提供。
    8. Html5更完整支持。
    9. 无系统内核的碎片化问题,更少的兼容性问题劣势。
    10. X5SDK是通过调用微信/手机QQ/空间的X5内核。如果手机没有安装腾讯相关软件。这个就不能使用。

    劣势

    1. 手机中必须安装有腾讯的服务。

    优劣对比

    cordova  ionic :
    
    
    优势:
        ios 和 android 基本上可以共用代码,纯web思维,开发速度快,简单方便,一次编码,到处运行,如果熟悉web开发,则开发难度较低。
        文档很全,系统级支持封装较好,所有UI组件都是有html模拟,可以统一使用。
        可实现在线更新 允许加载动态加载web js
        文档多,开发者多,视频教程多 容易学习    遇到问题容易解决  技术成熟
    
    劣势:
       占用内存高一些(不过手机内存都大了不影响),不适合做游戏类型app,   web技术无法解决一切问题,对于比较耗性能的地方无法利用
       native的思维实现优势互补,如高体验的交互,动画等。
    
    
    react-native :
    优势:
    1、虽然不能做到一处编码到处运行,但是基本上即使是两套代码,也是相同的jsx语法,使用js进行开发。用户体验,高于html,开发效率较高
    2、flexbox 布局 据说比native的自适应布局更加简单高效可实现在线更新 2015.7.28 AppStore审核政策调整:允许运行于JavascriptCore的动
       态加载代码更贴近原生开发。
    劣势:
    1、(引)对开发人员要求较高,不是懂点web技术就行的,当官方封装的控件、api无法满足需求时 就必然需要懂一些native的东西去扩展,扩展
        性仍然远远不如web,也远远不如直接写Native code。
    2、(引)官方说得很隐晦:learn once, write anywhere。人家可没说run anywhere。事实上,从官方的api来看SliderIOS,SwitchIOS..等等这
        些控件,之后势必会出现SliderAndroid,SwitchAndroid...,也就是很可能针对不同的平台会需要写多套代码。
    3、发展还不成熟,目前很多ui组件只有ios的实现,android的需要自己实现。(引)从Native到Web,要做很多概念转换,势必造成双方都要妥协。
       比如web要用一套CSS的阉割版,Native通过css-layout拿到最终样式再转换成native原生的表达方式(比如iOS的Constraint\origin\Center
       属性),再比如动画。另外,若Android和iOS都要做相同的封装,概念转换就更复杂。
    4、文档少  学习起来困难。
    
    5、文档还不够完整 学习曲线偏高。
    展开全文
  • native react 框架

    2019-03-07 18:14:12
  • 现在React Native越来越火,很多公司及个人已经慢慢开始转向这个框架,此框架号称代码复用率能达到80%左右,性能接近原生性能,关注的人也越来越多,不过成熟的App实在还没有几个,大家都在做实验版的,毕竟官网两周...

    现在React Native越来越火,很多公司及个人已经慢慢开始转向这个框架,此框架号称代码复用率能达到80%左右,性能接近原生性能,关注的人也越来越多,不过成熟的App实在还没有几个,大家都在做实验版的,毕竟官网两周一更新,很多人也不敢放实战项目里去,不过用起来感觉还可以吧,特此在本人做的项目上抽取出一个基本的框架,此框架能应用与大部分app框架结构。
    首先运行此基础框架要搭建其运行环境,运行环境前面有篇文章有介绍,不过还是建议参考官网文档说明,那是最新最权威的文档,在此不在介绍环境搭建,此框架测试平台为android平台,如有小伙伴查看此框架最好在android平台下。
    此框架实现的功能有:

    1.自定义Navigator导航栏功能

    2.使用TabNavigator做为底部菜单栏(可选react-native-scrollable-tab-view)

    3.集成redux,简单模拟使用

    4.加载动画模拟

    5.屏幕锁定,旋转模拟

    6.加入欢迎页面

    7.安卓返回按钮监听

    效果图:

    欢迎页:

    欢迎页

    首页效果:

    图片轮播页:

    轮播页

    listview实现的gridview页:

    listview

    自定义组件实现页:

    个人中心

    导航到第二页效果:

    导航展示

    使用方法

    1.git clone
    https://github.com/ReactNativeFramework/ReactNativeBaseFramework.git

    2.cd ReactNativeBaseFramework

    3.npm install

    4.react-native run-android

    github地址:

    github地址

    https://github.com/ReactNativeFramework/ReactNativeBaseFramework

    展开全文
  • React Native框架介绍

    2017-08-03 13:43:38
    一、环境搭建  1. 安装node.js,并配置环境变量(node -v)  2. 安装npm,(node.js集成了npm,无需安装,npm -v)  3. 安装python,并配置环境... 4. 安装react native命令行工具: npm install -g react-native-c

    一、环境搭建

           1. 安装node.js,并配置环境变量(node -v)

           2. 安装npm,(node.js集成了npm,无需安装,npm -v)

           3. 安装python,并配置环境变量(python -v)

           4. 安装react native命令行工具: npm install -g react-native-cli

           5. 安装webstorm

           配置pathon环境变量如下图:

      其他环境变量设置如下图:

    二、创建工程

          1. 创建react-native android项目:react-native init MyProject

          2. 启动react-native服务:在项目文件夹下 react-native start

          3. react-native run-android(cmd管理员权限,真机上运行设置Dev Settings)

          注意事项:在真机上运行工程,会出现以下错误:

    解决办法:手机摇一摇,或者通过系统菜单,打开调试菜单,如下图:

      点击最后一项:Dev Settings,如下图所示,配置上本机的ip地址和端口号,端口号固定为8081。然后点击确定,打开上图的调试菜单,点击Reload JS即可。

    三、React Native组件生命周期

    3-3-component-lifecycle

    四、其他资料

    1. React Native官方网站

          (1) react native英文官网:   https://facebook.github.io/react-native/docs
          (2) react native中文官网:http://reactnative.cn/docs/0.47/getting-started.html

    2. ES6语法

           (1)阮一峰ES6简介: http://es6.ruanyifeng.com/#docs/intro



    展开全文
  • React Native搭建简单的项目框架 React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架, 短短的一两年的发展就已经有很多家公司支持并采用此框架来搭建公司的移动端的应用, React Native使你能够在...
  • 前端开发是离用户最近的工程领域,需要在开发时间和体验上不断作出选择和权衡, 就像著名的论断 “php是最好的计算机语言"一样, js也能依靠(node, react native)一统天下. 我们都想要一个统一的框架搞定一切. 而...
  • 随着对react native的深入学习和实战积累的开发经验,我已经重新建立了一个新项目react-native-boilerplate-dolphin。此项目是一个rn app的模板项目,可用于学习和二次开发。 github项目地址 ...
  • 一个干净的react-native框架,你可以看到以下功能已经配置: 欢迎页面 动态底部导航 动态顶部导航 动态改变底部导航颜色 顶部导航传参数到它页面中 详情页面 Redux、store、reducer 结合 You can fork it,and use ...
  • CRN是Ctrip React Native简称,由携程无线平台研发团队基于React Native框架优化,定制成稳定性和性能更佳、也更适合业务场景的跨平台开发框架
  • 一款使用ReactNative框架编写的《知乎日报》App
  • 摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native又有哪些优势呢?...
  • 一、ReactReact.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发...
  • react_demo 基本组件搭建,框架 先执行命令安装插件 npm install运行命令 react-native run-android 运行项目运行环境:android模拟器(真机)[运行环境]+webStorm(编写工具)+node.js(虚拟机服务器)github地址: ...
  • React: React 是基础框架,是一套基础设计实现理念,开发者不能直接使用它来...在React框架之上,发展出来React Native 用来开发移动应用。 ps:因为React 基础框架与React.js框架是同时出现、同时进化发展的...
  • 近期和一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、新版本的升级体验、还有新支持的 React...
  • Cordova 和 React-Native 是使用 Web 开发移动端的两大框架, Cordova 是 Apache 旗下的,React-Native 是 Facebook 旗下的在2013年发布的一个前端框架,两者皆开源。下面的内容主要记录了这两大框架的优劣,以及...
  • react-native框架的特点

    2019-09-22 12:34:08
    因为近期有在看react-native框架只会那么一点皮毛,所总结了此框架的特点,备用面试。但要入门才好呀。。。 首先推荐一些常用的组件和组件库: 1.React Native 项目常用第三方组件汇总...
  • React框架中使用Echarts

    2018-12-09 16:34:35
    React框架中怎么使用Echarts插件 1.要使用该插件肯定要先下载该插件: npm install echarts --save 2.下载完之后就可以项目中使用了,但是在React框架中使用,必须还要下载一个echarts-for-react 库: npm install ...
  • 大致基本类同,JS-Native桥和前端渲染框架,只是使用框架技术不一样; Weex 阿里内部早期研发的一个通过 JSON 数据描述 native 渲染的项目WeApp以及Vue.js这款优秀的前端开源MVVM框架和深度结合; ...
1 2 3 4 5 ... 20
收藏数 19,960
精华内容 7,984
关键字:

native react 框架