dom调试 react-native_react-native dom调试 - CSDN
  • 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行...

    跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行深度解析。
    为什么我们需要跨平台开发? 本质上,跨平台开发是为了增加代码复用,减少开发者对多个平台差异适配的工作量,降低开发成本,提高业务专注的同时,提供比web更好的体验。通俗了说就是:省钱、偷懒。
    本篇主要以react-native、weex、flutter,结合资讯展望,深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们,因为对比ionic、phoneGap,它们更于 “naive”。
    这里写图片描述

    一、原理与特性

    目前移动端跨平台开发中,大致归纳为以下几种情况:
    • react native、weex均使用Java作为编程语言,目前Java在跨平台开发中,可谓占据半壁江山,大有“一统天下”的趋势。
    • kotlin-native开始支持 iOS 和 Web 开发,(kotlin已经成为android的一级语言)也想尝试“一统天下”。
    • flutter是Google跨平台移动UI框架,Dart作为谷歌的亲儿子,毫无疑问Dart成为flutter的编程语言,如下图,作为巨头新生儿,在flutter官网也可以看出,flutter同样“心怀天下”。

    1、React Native

    Facebook 出品,Java语言,JSCore引擎,React设计模式,原生渲染

    1.1、理念架构

    “Learn once, write anywhere”,代表着 Facebook对 react native 的定义:学习 react ,同时掌握web与app两种开发技能。 react native 用了 react 的设计模式,但UI渲染、动画效果、网络请求等均由原生端实现。开发者编写的js代码,通过 react native 的中间层转化为原生控件和操作,比ionic等跨平台应用,大大提高了的用户体验。
    总结起来其实就是利用 JS 来调用 Native 端的组件,从而实现相应的功能。
    如下图所示,react native 的跨平台是实现主要由三层构成,其中 C++ 实现的动态连结库(.so),作为中间适配层桥接,实现了js端与原生端的双向通信交互。这里最主要是封装了JavaCore执行js的解析,而 react native 运行在JavaCore中,所以不存在浏览器兼容的问题。
    其中在IOS上直接使用内置的javacore, 在Android 则使用webkit.org官方开源的jsc.so。
    这里写图片描述

    1.2、实现原理

    和前端开发不同,react native 所有的标签都不是真实控件,JS代码中所写控件的作用,类似 Map 中的 key 值。JS端通过这个 key 组合的 Dom ,最后Native端会解析这个 Dom ,得到对应的Native控件渲染,如 Android 中标签对应ViewGroup 控件。
    这里写图片描述
    在 react native 中,JS端是运行在独立的线程中(称为JS Thread )。JS Thread 作为单线程逻辑,不可能处理耗时的操作。那么如fetch 、图片加载、数据持久化等操作,在 Android 中实际对应的是okhttp 、Fresco 、SharedPreferences等。而跨线程通信,也意味着 Js Thread 和原生之间交互与通讯是异步的。
    可以看出,跨平台的关键在于C++层,开发人员大部分时候,只专注于JS 端的代码实现。 在原生端提供的各种 Native Module 模块(如网络请求,ViewGroup控件),和 JS 端提供的各种 JS Module(如JS EventEmiter模块),都会在C++实现的so中保存起来,双方的通讯通过C++中的保存的映射,最终实现两端的交互。通信的数据和指令,在中间层会被转为String字符串传输,双向的调用流程如下图。
    这里写图片描述
    这里写图片描述

    1.3、打包加载

    最终,JS代码会被打包成一个 bundle 文件,自动添加到 App 的资源目录下。react native 的打包脚本目录为/node_modules/react-native/local-cli,打包最后会通过 metro 模块压缩 bundle 文件。而bundle文件只会打包js代码,自然不会包含图片等静态资源,所以打包后的静态资源,其实是被拷贝到对应的平台资源文件夹中。
    其中图片等存在资源的映射规则,比如放在 react native 项目根目录下的 img/pic/logo.png 的资源,编译时,会被重命名后,根据大小 merged 到对应的是drawable目录下,修改名称为img_pic_logo.png。
    打包Android和IOS,肯定需要相应的平台项目存在,在 react-native init 时创建的项目,就已经包含了 android 和 ios 的模版工程,打包完的工程会加载bundle文件,然后启动项目,如下图。这里就不展(tou)开(lan)了,有兴趣的可以看:React Native For Android 架构初探 。
    这里写图片描述

    2、WEEX

    Alibaba 出品,Java语言,JS V8引擎,Vue设计模式,原生渲染

    2.1、理念架构

    “Write once, run everywhere”, weex的定义就像是:写个 vue 前端,顺便帮你编译成性能还不错的 apk 和 ipa(当然,现实有时很骨感)。基于 Vue 设计模式,支持 web、android、ios 三端,原生端同样通过中间层转化,将控件和操作转化为原生逻辑来提高用户体验。
    在 weex 中,主要包括三大部分:JS Bridge、Render、Dom,分别对应WXBridgeManager、WXRenderManager、WXDomManager,三部分通过WXSDKManager统一管理。其中 JS Bridge 和 Dom 都运行在独立的 HandlerThread 中,而 Render 运行在 UI 线程。
    JS Bridge 主要用来和 JS 端实现进行双向通信,比如把 JS 端的 dom 结构传递给 Dom 线程。Dom 主要是用于负责 dom 的解析、映射、添加等等的操作,最后通知UI线程更新。而 Render 负责在UI线程中对 dom 实现渲染。
    这里写图片描述

    2.2、实现原理

    和 react native一样,weex 所有的标签也不是真实控件,JS 代码中所生成存的 dom,最后都是由 Native 端解析,再得到对应的Native控件渲染,如 Android 中标签对应WXTextView控件。
    weex 中文件默认为 .vue ,而 vue 文件是被无法直接运行的,所以 vue 会被编译成 .js 格式的文件,Weex SDK会负责加载渲染这个js文件。Weex可以做到跨三端的原理在于:在开发过程中,代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致的。不同的是在JS Framework层的最后,web 平台和 Native 平台,对 Virtual DOM 执行的解析方法是有区别的。
    这里写图片描述
    实际上,在 Native 中对 bundle 文件的加载大致经历以下阶段:
    • weex 接收到 js 文件以后,JS Framework 根据文件为 Vue 模式,会调用weex-vue-framework中提供的createInstance方法创建实例。
    • createInstance中会执行 Js Entry 代码里new Vue()创建一个组件,通过其 render 函数创建出 Virtual DOM 节点。
    • 由JS V8 引擎上解析 Virtual DOM ,得到 Json 数据发送至 Dom 线,这里输出 Json 也是方便跨端的数据传输。
    • Dom 线程解析 Json 数据,得到对应的WxDomObject,然后创建对应的WxComponent提交 Render 。
    • Render在原生端最终处理处理渲染任务,并回调里JS方法。
    得益于上层的统一性,只是通过weex-vue-framework判断是由Vue.js生成真实的 Dom ,还是通过 Native Api 渲染组件,weex 一定程度上上,用JS 实现了vue一统天下的效果。
    这里写图片描述
    weex 在原生渲染 Render 时,在接收到渲染指令后,会逐步将数据渲染成原生组件。Render 通过解析渲染数据的描述,然后分发给不同的模块。
    比如 控件渲染属于dom模块中,页面跳转属于navigator模块等。模块的渲染过程并非一个执行完,再执行另一个的流程,而是类似流式的过程。如上一个的组件还没渲染好,下一个

    的渲染又发了过来。这样当一个组件的嵌套组件很多时,或者可以看到这个大组件内的UI,一个一个渲染出来的过程。
    承当了重要的职责,使得上层具备统一性,可以支持跨三个平台。总的来说它主要负责是:管理Weex的生命周期;解析JS Bundle,转为Virtual DOM,再通过所在平台不同的API方法,构建页面;进行双向的数据交互和响应。
    这里写图片描述

    2.3、打包

    weex 作为 react-native 之后出现的跨平台实现方案,自然可以站在前人的肩膀上优化问题,比如:Bundle文件过大问题。
    Bundle文件的大小,很大程度上影响了框架的性能,而 weex 选择将JS Framework集成到 WeexSDK 中,一定程度减少了JS Bundle的体积,使得 bundle 里面只保留业务代码。
    打包时,weex 是通过 webpack 打包出 bundle 文件的。bundle 文件的打包和 entry.js文件的配置数量有关,默认情况下之后一个 entry 文件,自然也就只有一个bundle文件。
    在 weex 项目的 webpack.common.conf.js中可以看到,其实打包也是区分了 webConfig和weexConfig的不同打包方式。如下图,其中weexEntry 就是 weex 打包配置的地方,可以看到本来已经有index和 entry.js存在了。如果有需要,可配置上你需要的打包页面,具体这里就不详细展开了。有兴趣可看:Weex原理之带你去蹲坑 。
    这里写图片描述

    3、Flutter

    Google 出品,Dart语言,Flutter Engine引擎,响应式设计模式,原生渲染
    Flutter 是谷歌2018年发布的跨平台移动UI框架。相较于本人已经在项目中使用过 react native 和 Weex,Flutter目前仅仅是简单运行过Demo,毕竟还是beta 阶段,这里更多的聊一下它的实现机制和效果。
    与 react native 和 weex 的通过 Java 开发不同,Flutter 的编程语言是Drat,(谷歌亲儿子,据说是因为 Drat 项目组就在 Flutter 隔壁而被选上( ))所以执行时并不需要 Java 引擎,但实际效果最终也通过原生渲染。
    这里写图片描述
    如上图,Flutter 主要分为Framework和Engine,我们基于Framework 开发App,运行在 Engine 上。Engine 是 Flutter 的独立虚拟机,由它适配和提供跨平台支持,目前猜测 Flutter 应用程序在 Android 上,是直接运行 Engine 上 所以在是不需要Dalvik虚拟机。(这是比kotlin更彻底,抛弃JVM的纠缠?)
    如下图,得益于 Engine 层,Flutter 甚至不使用移动平台的原生控件, 而是使用自己 Engine 来绘制 Widget (Flutter的显示单元),而 Dart 代码都是通过 AOT 编译为平台的原生代码,所以 Flutter 可以 直接与平台通信,不需要JS引擎的桥接。同时 Flutter 唯一要求系统提供的是 canvas,以实现UI的绘制。咦?这么想来,支持web端也没问题吧!
    这里写图片描述
    在Flutter中,大多数东西都是widget,而widget是不可变的,仅支持一帧,并且在每一帧上不会直接更新,要更新而必须使用Widget的状态。无状态和有状态 widget 的核心特性是相同的,每一帧它们都会重新构建,有一个State对象,它可以跨帧存储状态数据并恢复它。
    Flutter 上 Android 自带了 Skia,Skia是一个 2D的绘图引擎库,跨平台,所以可以被嵌入到 Flutter的 iOS SDK中,也使得 Flutter Android SDK要比 iOS SDK小很多。

    二、对比

    这算是互相伤害的环节了吧。
    这里写图片描述

    1、大小

    上面Apk大小是通过react-native init、weex create 和 flutter 创建出的工程后,直接不添加任何代码,打包出来的 release 签名 apk 大小。从下图可以看出,其中大比例都是在so库。
    这里写图片描述

    2、社群

    react native 作为 Facebook 主力开源项目之一,至今已有各类丰富的第三方库,甚至如realm、lottie 等开源项目也有 react native 相关的版本,社群实际无需质疑。当然,因为并完全正统开发平台,第三库的健壮性和兼容性有时候总是良莠不齐。
    weex 其实有种生错在国内的感觉。其实 weex 的设计和理念都很优秀,性能也不错,但是对比 react native 的第三方支持,就显得有点后妈养的。2016年开源至今,社区和各类文档都显得有点疲弱,作为跨平台开发人员,大多时候肯定不会希望,需要频繁的自己增加原生功能支持,因为这样的工作一多,反而会与跨平台开发的理念背道而驰,带来开发成本被维护难度增加。
    Flutter目前还处理beta阶段,但是谷歌的号召力一直很可观,这一点无需质疑。

    3、性能

    理论上 flutter 的性能应该是最好的,但是目前实际体验中,却并没有感受出来太大的差距,和 react native(0.5.0之后)、weex 在性能上个人体验差异不是很大。当然,这里并没有实测渲染的毫秒时间和帧率数据。

    4、其他区别

    Weex的多页面实现问题

    weex 在 native 端是不支持keep-alive的,这一点和 react-native 不同在与,如果在 native
    需要实现页面跳转,使用 vue-router 将会惨不忍睹:返回后页面不做特别处理时,是会空白一片。参考官方Demo playground
    ,native 端 的采用weex.requireModule(‘navigator’)跳转 Activity 是才正确实现。
    同时,weex中 navigator
    跳转的设计,也导致了多页面的页面间通讯的差异。weex在多页面下的数据通讯,是通过url实现的,比如file://assets/dist/SecondPage.js
    params=0,而vuex和vue-router在跨页面是无法共用的;而 react native 在跨 Actvity
    使用时,因为是同一个bundle文件,只要 manager 相同,那么 router 和 store 时可以照样使用的,数据通信方式也和当个
    Actvity 没区别。

    项目模板

    weex 和 react native 模板代码模式也不同。weex 的模板是从 cordova
    模式修改过来的,根据platform需求,用命令添加固定模块,而在 .gitignore 对 platforms文件夹是忽略跟踪。
    react native 在项目创建时模版就存在了,特别是添加第三方插件原生端支持时,会直接修改模板代码,git代码中也会添加跟踪修改。

    三、未来趋势

    我们选择框架的时候,很多时候会关注框架的成熟度和生命力不是么。

    1、React Native

    “Airbnb 宣布放弃使用 React Native,回归使用原生技术” : Airbnb 作为 react native 平台上最大的支持者之一,其开源的lottie同样是支持原生和 react native。
    Airbnb 在宣布放弃的文中,也对 react native 的表示了很大量的肯定,而使得他们放弃的理由,其实主要还是集中于项目庞大之后的维护困难,第三方库的良莠不齐,兼容上需要耗费更多的精力导致放弃。
    ps:( Lottie库Airbnb出的是一个能够帮助解析AE导出的包含动画信息的json文件。这很好的解决了一个矛盾,设计师可以更专注的设计出各种炫酷的动画效果,而开发只需要将其加入支持即可。)
    Facebook 正在重构 React Native,将重写大量底层。 在经历了开源协议风波后,可以看出 Facebook 对于 react native 还是很看重的, 这些底层重构优化的地方,主要集中于:
    首先,改变线程模型。UI 更新不再需要在三个不同的线程上执行,而是可以在任意线程上同步调用 Java 进行优先更新,同时将低优先级工作推出主线程,以便保持对 UI 的响应。其次,将异步渲染功能引入 React Native 中,允许执行多个渲染并简化异步数据处理。最后,简化桥接,让它更快、更轻量。原生和 Java 之间的直接调用效率更高,并且可以更轻松地构建调试工具,如跨语言堆栈跟踪。

    2、Weex

    没有死!阿里公开Weex技术架构,还开源了一大波组件。 从 2018年初的新闻可以看出,weex 的遭遇有点类似曾经的 Duddo(Dubbo因为内部竞争被阿里一度放弃维护),这波诈尸后weex被托管到了Apache,而github的weexteam 如今也还保持着更新,希望后续能有多好的发展,拭目以待吧。

    3、Flutter

    Flutter 是 Google 跨平台移动UI框架,Dart作为谷歌的亲儿子在 Flutter 中使用,并且谷歌新操作系统 Fuchsia 支持 Dart,使用 Flutter 作为操作UI框架。这些集合到一起难免让你怀疑 Android 是否要被谷歌抛弃的想法。
    或者如今先 Android 等平台上推广 Flutter 与 Dart,就是为了以后跟好的过渡到新系统上,毕竟开发者是操作系统的生命源泉之一。而 Java 与 JVM 或者可以被谷歌完全抛开。当然,目前看起来 Flutter 貌似还缺少一些语法糖,嵌套下来的代码有点不忍直视,或者到正式版之后,我们更能感受出它的美丽吧。


    转载自:http://www.cnblogs.com/androidga/p/9294466.html

    展开全文
  • React-Native简单介绍

    2017-06-21 10:10:19
    React-Native 入门指导系列教程目录 一、准备工作 (已完成) 二、项目介绍与调试 三、CSS样式与Flex布局 四、常用UI控件的使用 五、JSX在React-Native中的应用 六、事件与数据调用 七、自定义组件 八、动手写...
    React-Native 入门指导系列教程目录
    二、项目介绍与调试
    三、CSS样式与Flex布局
    四、常用UI控件的使用
    五、JSX在React-Native中的应用
    六、事件与数据调用
    七、自定义组件
    八、动手写实例
    九、发布与真机调试
     
    写在前面
    1. 什么是React-Native?
      
      React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台。
      React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。
     
    2.React-Native有啥优缺点?
      优点是:能够用JavaScript脚本就可以写出App的界面,对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
    和其他的移动Web框架相比:
    • Native不用WebView,彻底摆脱了WebView让人不爽的交互和性能问题;
    • Native的原生控件有更好的体验;
    • Native有更好的手势识别;
    • Native有更适合的线程模型;
      缺点是:还在试用阶段,潜在的问题尚不得而知:兼容性问题,性能问题等。还没大量普及,学习资料尚且不多,供爱折腾的朋友尝尝鲜。
     
    3.成功案例有哪些?
      那么,现在有哪些公司在用这个新出来的技术呢?据了解,有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。
      天猫iPad客户端“猜你喜欢”业务,支付宝新一代的框架基于React;携程网App部分新业务;去哪儿网给航空公司用的收益辅助系统;百度图片搜索无线的新首页,部分试水;Quip 最好用的在线文档协作工具……
      
    4.要学些什么?
      想必,大家已经按耐不住,会发问,使用React-Native开发要学习些什么呢?
      好了,废话不多,直入正题吧。
     
    环境配置
    1. 硬件条件
      你需要一台Mac电脑,或者是安装了OSX系统的电脑,这是iOS App开发的前提。
     
    2. 软件条件
    (1). 安装最新版的XCode,建议是XCode7.1及以上版本。(PS: 如果不是最新版,可能在之后新建项目的时候,会编译通不过。小编就是之前没把XCode升级到最新版,然后被一个编译问题困扰了很久。)
    (2). 安装HomeBlew(OS系统上的一个安装包管理器,安装后可以方便后续安装包的安装。)
    终端命令:
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    (3). 安装Node.js (服务端的JavaScript运行环境)
    成功安装后,终端会有如下提示信息:
    Node.js was installed at: /usr/local/bin/node 

    npm was installed at: /usr/local/bin/npm 

    Make sure that /usr/local/bin is in your $PATH.
    (4). 建议安装WatchMan(React修改source文件的一个工具)
    终端命令: 
    brew install watchman
    (5). 安装Flow: 一个JavaScript 的静态类型检查器。
    终端命令:
    brew install flow
    (6). 安装React Native CLI: 用来开发React Native的命令行工具
    终端命令:
    npm install -g react-native
    装好了环境,就可以愉快的玩耍起来了。
     
    创建项目
    1. 新建一个项目
      新建一个“HelloWorld”的项目,每个语言的开始教程都是这个,我们也不例外。
    操作超级简单,只需终端输入命令行:
    react-native init HelloWorld 
     
    2. 运行项目
      创建的项目包含Andriod和iOS两个版本,我们这边就先介绍iOS的操作。(Andriod的操作也大同小异,无非就是编译的环境不同,js文件中的内容和写法都是通用的。学会了iOS的用法,再研究Andriod下的React-Native开发,会很轻松。)
      
      用XCode打开ios/HelloWorld.xcodeproj文件,点击键盘"⌘-R”或者点击"Run",编译运行项目。会启动React-Native服务和iOS模拟器。
      在iOS模拟器中可以看到如图界面:
      
      React-Native服务在编写过程中要一直开着,如图:
      
      如果不小心把它关了,没关系,可以在终端输入:
    npm start

    来重新开启服务。

     
    如何调试
      安装谷歌的Chrome Developer Tools,具体使用方法,在之后的教程中会再具体介绍。
     
    写在最后
      好了,看到这里,如果你已经成功配置了React-Native的环境,并且新建并成功运行了第一个程序了。那么,就先恭喜了,我们甚至没有写一行代码,就已经成功运行了第一个React-Native的程序,是不是还挺简单的。正所谓,良好的开端是成功的一半。
      在接下来的一篇文章中,我会和大家一起来具体看看自动新建项目中包括的内容,以及每个文件中具体写法和作用。
     
    附上facebook官方的教程网站地址,供大家研究学习:https://facebook.github.io/react-native/docs/getting-started.html
    展开全文
  • react-native 的简介

    2016-05-24 11:25:28
    React-native是什么 react-native是一个可以使用 JavaScript 来开发 iOS和 Android原生应用( app )的框架。...2、ReactNative 使你能够使用基于JavaScript 和 React ,在本地平台上构建世界一流的应用程序体验...

    很久没回来这里发博客了。

    最近在学react-native,感觉很必要沉淀一下相关的知识,所以写一编关于react-native 的简介的博文。


    React-native是什么


    react-native是一个可以使用JavaScript来开发iOSAndroid原生应用( app的框架。

    1、它在 JavaScript中使用React 抽象操作系统原生的 UI 组件,代替DOM 元素来渲染等等。

    2、ReactNative 使你能够使用基于JavaScript 和 React ,在本地平台上构建世界一流的应用程序体验。

    3、开发者只需学习一种语言就能轻易为任何平台高效地编写代码。

    4、提高多平台开发的开发效率—— 仅需学习一次,编写任何平台。(Learnonce, write anywhere)



    React-native的工作原理


    在页面渲染上它是使用JavaScript抽象原生的UI组件来进行渲染的。

    在通讯上React Native运行在主线程之外,在另一个专门的后台线程里运行JavaScript引擎,两个线程之间通过异步消息协议来通信。

    UI方面React Native提供了一个跨平台、类似Flexbox的布局系统,并且还支持CSS子集。 它支持用JSX、JavaScript、CoffeeScript和TypeScript来开发。



    React-native的机制特性   


    1.组件的使用

    使用ReactNative,你可以使用标准的平台组件

    例如iOS的UITabBar或安卓的Drawer。这使你的app获得平台一致的视觉效果和体验,并且获得最佳的性能和流畅性。 使用对应的Reactcomponent,就可以轻松地把这些原生组件整合到你的ReactNative应用中,例如TabBarIOS和DrawerLayoutAndroid。


    2.异步执行

    Javascript代码和原生平台之间的所有操作都是异步执行的,并且原生模块还可以根据需要创建新的线程

    Javascript和原生代码之间的通讯是完全可序列化的,这使得我们可以借助Chrome开发者工具去调试应用,而不论应用运行在模拟器还是真机上。

    ReactNative 的语言是基于JavaScript,这必然会使得代码可以从服务器端动态更新成为可能。更新代码方便快捷,提交一个js到服务端就能在app体现。


                                             上图就是通过谷歌浏览器来调试模拟器上面的app


    3.触摸事件处理

    ReactNative实现了一个强大的触摸事件处理系统,可以在复杂的View层次关系下正确地处理触摸事件。

    同时还提供了高度封装的组件如TouchableHighlight等,可以直接嵌入到ScrollView或者其它的元素中,无需额外配置。



    4.弹性布局和样式

    ReactNative使用了弹性布局flexbox的原理,控制view的布局应当简单易行。

    同时还提供了简洁的样式组件给开发者使用。



    5.兼容和可扩展性

    ReactNative吸纳了web生态系统中的通用标准,并提供了不少API的兼容层。

    扩展性方面,使用ReactNative,无需编写一行原生代码即可创造一款不错的app。

    同时,自定义的原生视图和模块来扩展ReactNative也非常容易。




    React-native的优缺点


    优点

    1.更新方便,无需多次编译,只需要更新服务端的js

    2.布局代码简单,对于前端来说入门成本低。

    3.css-layout,能通过类似css的方式进行布局。

    4.异步执行,调试方便。

    5.点按操作抽象成组件,机制完善。

    6.不用Webview,摆脱Webview让人不爽的交互和性能问题


    缺点

    1.组件必须依赖原生的组件和方法。

    2.外壳是react,入门成本高。

    3.从Native到Web,要做很多概念转换,造成双方都要妥协。布局相对还是麻烦,有待优化。

    4.样式组件是阉割版的css,还不够好用。


    React-native看法


    1.目前react-native在国内还是相对较新的技术

    2.各大小公司都开始投人去研究这个黑科技的框架

    3.有一定的入门门槛,到处是坑

    4.资料和demo都很少,需要自己好好去研究

    5.以后会是一个很有前景的框架,值得学习使用


    React-native学习资料












    展开全文
  • React-Native入门指导之iOS篇 —— 一、准备工作 React-Native 入门指导系列教程目录 一、准备工作 (已完成) 二、项目介绍与调试 三、CSS样式与Flex布局 四、常用UI控件的使用 五、JSX在React-Native中的应用 ...

    React-Native入门指导之iOS篇 —— 一、准备工作


    写在前面
    1. 什么是React-Native?
      
      React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台。
      React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Image>替代<img>等。
     
    2.React-Native有啥优缺点?
      优点是:能够用JavaScript脚本就可以写出App的界面,对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
    和其他的移动Web框架相比:
    • Native不用WebView,彻底摆脱了WebView让人不爽的交互和性能问题;
    • Native的原生控件有更好的体验;
    • Native有更好的手势识别;
    • Native有更适合的线程模型;
      缺点是:还在试用阶段,潜在的问题尚不得而知:兼容性问题,性能问题等。还没大量普及,学习资料尚且不多,供爱折腾的朋友尝尝鲜。
     
    3.成功案例有哪些?
      那么,现在有哪些公司在用这个新出来的技术呢?据了解,有些国内走在技术前沿的公司已经开始在试用React.js开发项目了。
      天猫iPad客户端“猜你喜欢”业务,支付宝新一代的框架基于React;携程网App部分新业务;去哪儿网给航空公司用的收益辅助系统;百度图片搜索无线的新首页,部分试水;Quip 最好用的在线文档协作工具……
      
    4.要学些什么?
      想必,大家已经按耐不住,会发问,使用React-Native开发要学习些什么呢?
      好了,废话不多,直入正题吧。
     
    环境配置
    1. 硬件条件
      你需要一台Mac电脑,或者是安装了OSX系统的电脑,这是iOS App开发的前提。
     
    2. 软件条件
    (1). 安装最新版的XCode,建议是XCode7.1及以上版本。(PS: 如果不是最新版,可能在之后新建项目的时候,会编译通不过。小编就是之前没把XCode升级到最新版,然后被一个编译问题困扰了很久。)
    (2). 安装HomeBlew(OS系统上的一个安装包管理器,安装后可以方便后续安装包的安装。)
    终端命令:
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    (3). 安装Node.js (服务端的JavaScript运行环境)
    成功安装后,终端会有如下提示信息:
    Node.js was installed at: /usr/local/bin/node 

    npm was installed at: /usr/local/bin/npm 

    Make sure that /usr/local/bin is in your $PATH.
    (4). 建议安装WatchMan(React修改source文件的一个工具)
    终端命令: 
    brew install watchman
    (5). 安装Flow: 一个JavaScript 的静态类型检查器。
    终端命令:
    brew install flow
    (6). 安装React Native CLI: 用来开发React Native的命令行工具
    终端命令:
    npm install -g react-native
    装好了环境,就可以愉快的玩耍起来了。
     
    创建项目
    1. 新建一个项目
      新建一个“HelloWorld”的项目,每个语言的开始教程都是这个,我们也不例外。
    操作超级简单,只需终端输入命令行:
    react-native init HelloWorld 
     
    2. 运行项目
      创建的项目包含Andriod和iOS两个版本,我们这边就先介绍iOS的操作。(Andriod的操作也大同小异,无非就是编译的环境不同,js文件中的内容和写法都是通用的。学会了iOS的用法,再研究Andriod下的React-Native开发,会很轻松。)
      
      用XCode打开ios/HelloWorld.xcodeproj文件,点击键盘"⌘-R”或者点击"Run",编译运行项目。会启动React-Native服务和iOS模拟器。
      在iOS模拟器中可以看到如图界面:
      
      React-Native服务在编写过程中要一直开着,如图:
      
      如果不小心把它关了,没关系,可以在终端输入:
    npm start

    来重新开启服务。

     
    如何调试
      安装谷歌的Chrome Developer Tools,具体使用方法,在之后的教程中会再具体介绍。
     
    写在最后
      好了,看到这里,如果你已经成功配置了React-Native的环境,并且新建并成功运行了第一个程序了。那么,就先恭喜了,我们甚至没有写一行代码,就已经成功运行了第一个React-Native的程序,是不是还挺简单的。正所谓,良好的开端是成功的一半。
      在接下来的一篇文章中,我会和大家一起来具体看看自动新建项目中包括的内容,以及每个文件中具体写法和作用。
     
    附上facebook官方的教程网站地址,供大家研究学习:https://facebook.github.io/react-native/docs/getting-started.html
    展开全文
  • 一、 react-native 常见操作 1.创建项目 react-native init Market(项目名称,首字母大写) 2.安装常用插件 npm install react-native-tab-...npm install react-native-actionsheet --save // ActionSheet菜单...
  • 什么是React-Native

    2017-12-14 11:35:09
     React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台。 ...
  • React-native 安装基础篇

    2019-04-07 13:47:14
    React-native 安装基础篇 RN官方文档 (0.55): ... RN 中文翻译 文档 (0.51): - https://reactnative.cn 推荐博客 ES6 语法学习(阮一峰) - http://es6.ruanyifeng.com 以下基于MacOS 一...
  • React native源自ReactReact 是一套可以用简洁的语法高效绘制Dom的框架。React中需要使用JSX语法,JSX是对JavaScript的扩展。JSX可以将CSS,HTML,表达式进行一起书写,简化了html代码书写的形式。 优势 跨平台...
  • react-native的简单使用

    2017-03-03 16:49:55
    二、目前存在的问题1、react-native库会直接带动整个编译环境提升到最高,否则编译不了。带来的影响是新的buildtool似乎把很多以前废弃的函数直接undfine了,即可能找不到该函数了。以前的很多业务代码报
  • React-Native调试工具

    2017-11-28 21:18:01
    React-Native调试工具
  • react-native debugger调试

    2019-06-23 12:50:46
    google打开:http://localhost:8081/debugger-ui
  • 一、简介1、React-Native介绍  React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。...
  • 1、安装模拟器 下载并安装夜神模拟器,安装成功后,命令行连接模拟器(前提是配置了 adb 环境变量,或者到 sdk adb 目录下运行): adb connect 127.0.0.1:62001 ...react-native init MyProject ...
  • 使用react-native-cli安装版本不能低于0.60.0 error Cannot use React Native CLI to initialize project with version lower than 0.60.0.如何安装低版本 启动命令: react-native run-android 安卓模拟器总是...
  • 在一个 React 项目应用中,路由配置必不可少,它决定了组件页面应该如何跳转,参数如何传递,而 react-router-dom 又是 React 中的路由首选。那么它应该如何使用?与 react-router 以及 react-router-native 又有...
  • Facebook 在React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native,本中文教程翻译自 React Native 官方文档。  React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来...
  • React-native环境配置 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等...
  • Adb的全称为Android Debug Bridge,就是起到调试桥的作用,真机调试安卓必备的工具。 做RN开发一般都会安装android studio,在安装之初会有一个android-platform-tools选项,这个就是adb用到的东西了。安装android ...
  • 特别是做过Hybrid开发的同学,Web+Native一个很经典的开发模式,包括现在依然很多App上都在使用。我们列举几个比较重要的属性吧source {uri: string, method: string, headers: object, body: string}, {...
1 2 3 4 5 ... 20
收藏数 3,202
精华内容 1,280
热门标签
关键字:

dom调试 react-native