【React-Native2点滴知识 】
文章平均质量分 70
React-Native学习
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
React Native 启动速度优化——Native 篇(内含源码分析)
Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」据我考据这个问题起码有十年历史了。在日新月异学不动的前端圈子里,这个问题能一直被问,就是因为因为它是个非常好的问题,涉及非常多的知识点,平时做一些性能优化,都可以从这个问题出发,分析性能瓶颈,然后对症下药进行优化。不过今天我们不谈 Web 的性能优化,只是借助刚刚的那个那个经典问题的分析思路,从 React Native 的启动到页面的第一次渲染完成,结合 React Native 的源码和 1.0 的新架构转载 2021-04-20 09:15:57 · 1189 阅读 · 2 评论 -
React Native 启动速度优化——JS 篇【全网最全,值得收藏】
如果你喜欢我的文章,希望点赞???? 收藏 ???? 评论 ???? 三连支持一下,谢谢你,这对我真的很重要!前言上一篇文章主要从 Native 的角度分析了 React Native 的初始化流程,并从源码出发,总结了几个 React Native 容器初始化的优化点。本文主要从 JavaScript 入手,总结了一些 JS 侧的优化要点。1.JSEngineHermesHermes 是 FaceBook 2019 年中旬开源的一款 JS 引擎,从 release 记录可以看出,转载 2021-04-20 09:12:17 · 816 阅读 · 0 评论 -
React Native 新架构
React Native 新架构本文主要介绍FB团队正在重构的ReactNative(下面称RN)新架构,主要当前架构,Bridge带来的问题,新架构,JSI,Fabric,TurboModules,CodenGen及LeanCore等概念。当前架构RN现在主要有3个线程JS thread。JS代码执行线程,负责逻辑层面的处理。Metro(打包工具)将React源码打包成一个单一JS文件(就是图中JSBundle)。然后传给JS引擎执行,现在ios和android统一用的是J..转载 2021-04-02 11:21:32 · 553 阅读 · 0 评论 -
React Native之原理浅析
一、JavaScriptCore讲React Native之前,了解JavaScriptCore会有帮助,也是必要的。React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与,你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上,默认的就是JavaScriptCore, iOS 7之后的设备都支持. iOS 不允许用自己的JS Engine. JavaScriptCore来自于WebKit,转载 2021-01-12 11:20:02 · 1480 阅读 · 0 评论 -
React Native 原理与实践
React Native 介绍什么是 React Native?React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上 Virtual DOM 跨平台的优势,实现了真正意义上的:Learn Once,Write Anywhere.注:非高清 logo,这不是原子转载 2021-01-12 10:59:47 · 984 阅读 · 0 评论 -
【React Native进阶】React Native Gesture Handler的使用
背景说到React Navtive的性能优化,首先要了解React Native的运行机制。React Native程序主要运行在三个并行的线程上:JS Thread:我们写的JS代码逻辑都是在这个线程上执行; UI Thread:即原生线程,当我们需要调用原生的渲染或者能力时会运行到这个线程上; Shadow Thread:这个线程创建和管理着Shadow Tree,它类似于虚拟DOM。它通过Yoga引擎着Flexbox布局转化为原生的布局方式。这三个线程独立运行的情况下,性能良好,但如果存转载 2020-12-16 10:25:44 · 6421 阅读 · 0 评论 -
react-native bundle 到 bundle 生成到底发生了什么(metro 打包流程简析)
本文涉及react-native及metro版本react-native@0.63.2 metro@0.58.0先来看一波本文的实例代码:很简单吧,一个你好,世界// App.jsimport React from "react";import { StyleSheet, Text, View } from "react-native";export default class App extends React.Component { render() { retu...转载 2020-12-03 20:20:16 · 2727 阅读 · 2 评论 -
ReactNative与iOS通信原理解析-通信篇
文章首发个人博客:ReactNative与iOS通信原理解析-通信篇导语:其实原本是想编写一篇react-native(下文简称 rn) 在iOS中如何实现jsbridge的文章;相信看过官方文档的同学都清楚 rn 和 iOS 通信使用了一个叫RCTBridgeModule的模块去实现;相信大家与我一样,不能知其然不知其所以然;所以决定去翻一番 rn 的源码,一探其 rn 与 iOS 通信的机制。结果随着分析的深入发现内容较多;于是编写了ReactNative 与 iOS 原生通信原理解...转载 2020-12-03 20:16:25 · 1548 阅读 · 1 评论 -
React-Native 屏幕适配的问题
1. 前言在使用react-native进行开发的时候我们参见官方文档知道做屏幕适配是使用flexBox来进行布局.戳我查看 flexBox 布局有关flexBox的属性这里不做太多介绍,不会的请参考官方文档.这里只是说一下在做屏幕适配的时候发现仅仅使用flexBox还有点不太够用~在react-native中我们使用StyleSheet这个对象来进行样式的开发.示例代码如下所示:import { StyleSheet } from "react-native";// ...原创 2020-11-28 17:01:43 · 983 阅读 · 1 评论 -
修改React-Native组件的默认属性
1. 问题我们在做网页开发的时候都知道标签有默认样式,例如<ul/>,<li/>等等.所以一般我们在开发项目的时候首先要做的就是先把标签的默认样式给清除掉.例如使用reset.css||normalize.css.但在开发 RN 的时候发现有些组件的默认属性很烦人.同样的需要重写这些默认属性.例如:<Text/><TextInput/>这两个组件的有个属性allowFontScaling=true即:属性默认跟随系统字体大小,超级坑爹...转载 2020-10-30 17:31:05 · 986 阅读 · 0 评论 -
新版React Native 混合开发(iOS篇)
在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。混合开发的一些其他应用场景:在原有项目中加入RN页面,在RN项目中加入原生页面原生页面中嵌入RN模块RN页面中嵌入原生模块Native UI Components以上这些都属于React Native混合开发的范畴,那么如何进行React Native混合开发转载 2020-09-21 09:36:37 · 4927 阅读 · 0 评论 -
React Native应用性能瓶颈分析和优化
导语本文结合React Native跨平台框架的应用工作原理,分析性能瓶颈,分享实践中的优化性能问题内容输入。背景随着移动互联网的高速发展,在很多的业务场景下,传统的纯原生开发已经不能满足日益增长的业务需求。为了提升开发效率,使APP具备动态化能力,同时提升用户体验,项目中引入了React Native框架。使用过程中发现部分React Native页面性能存在一些问题,尤其是复杂页面渲染性能较差,于是决定深入调研和解决这些问题。React Native工作原理1.概览React N转载 2020-07-18 12:40:34 · 2476 阅读 · 1 评论 -
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本人是基于iOS开发,安卓版本的目前还没有去实践运行,后续有时间会去实践,如果遇到问题,可以@我。最后,这边针对iOS运行的时候遇到的问题也有汇总,并提供解决方案。最后的最后,由于本片文章会很长,所以推荐一个Chrome插件,可以自动根据文章中的h1~h6生成目录,方便查看章节内容,在编写文章时也可以用哦!Sma转载 2020-07-14 21:43:50 · 2296 阅读 · 0 评论 -
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本人是基于iOS开发,安卓版本的目前还没有去实践运行,后续有时间会去实践,如果遇到问题,可以@我。最后,这边针对iOS运行的时候遇到的问题也有汇总,并提供解决方案。最后的最后,由于本片文章会很长,所以推荐一个Chrome插件,可以自动根据文章中的h1~h6生成目录,方便查看章节内容,在编写文章时也可以用哦!Sma转载 2020-07-14 19:54:22 · 1338 阅读 · 0 评论 -
零Node基础看懂React-Native脚手架工具
做过RN开发的同学肯定对react-native-cli命令行工具不陌生,官方文档一开始在搭建开发环境的章节就会介绍到利用这个工具快速创建一个新项目。刚开始接触RN开发的你,一定会对这个命令行工具感到好奇,它是如何快速的创建一个RN项目的呢,又是如何完成一系列的工程目录结构创建,配置信息添加,各种依赖安装的呢,本文就带你来一探究竟。react-native-cli是Facebook开源项目ReactNative自带的一个脚手架工具,可以很方便帮助开发者快速的从0开始创建一个完整的RN项目。react-n转载 2020-07-10 20:36:30 · 2276 阅读 · 0 评论 -
【从源码分析】可能是全网最实用的React Native异常解决方案
前言在做React Native混合开发时,生产环境有时会遇到打开RN(即React Native简称)应用白屏、RN页面内操作闪退到native页面或者直接导致APP Crash的情况。通过分析APP日志,发现原因可以归类为一下两种:js 层编译运行时报错。一般是由于某些特殊的数据或情景导致js执行报错; js 转译 native UI 或与 native modules通信时出现异常.对于第一点,可以很快地通过log追踪到出现问题的js代码并解决,但是对于第二点,往往是框架底层代码执行报错阻转载 2020-12-03 15:54:36 · 2343 阅读 · 0 评论 -
React Native 原生混合路由解决方案
在 RN 出来前许多公司都已经有一套完整的 App,可能业务复杂、依赖繁多,在这种情况下,将原有的 App 推翻重写明显是不切实际的,成本和风险都较高。所以如何进行混合性开发则至关重要。目前 RN 官方建议的路由框架为 react-navigation,这个框架大部分逻辑是 javascript 编写的,RN 页面的栈管理由 JS 端控制,所以当原生和 RN 页面混合开发时,由于原生栈和 RN 栈不一致,导致栈管理较混乱。出现 RN - 原生 - 原生 - RN 跳转场景时,若为单一的 RN 容器管理,转载 2020-06-02 08:41:34 · 831 阅读 · 0 评论 -
ReactNative: 自定义ReactNative API组件
一、简介在前面介绍了很多ReactNative中UI组件和API组件,这些都是Facebook团队封装好的基础组件,开发者可以直接使用。然而,在实际的开发过程中,面对复杂的需求,此时原生的Native组件可能就无法满足要求了。当然,这种情况Facebook团队是当然考虑过了,所以在ReactNative开发中也支持开发者进行自定义API组件。二、详解1、类模块和方法:一个普通...原创 2020-05-31 10:34:30 · 939 阅读 · 0 评论 -
RN系列:RN使用Android原生控件或自定义组件
【简述RN集成到Android原生项目】【RN系列:Android原生与RN如何交互通信】其实RN中已存在部分控件到原生控件的映射,在RN中可以直接使用,可是毕竟RN提供的组件有限,我们平时原生开发中还进行自定义控件/组件呢,所以这里就讲到了RN如何去使用我们原生的自定义控件/组件。下面以开发中碰到的事例简单介绍一下:RN开发中同样的代码在Android与IOS上会有不同的现象,部分布局在iOS上显示没有问题,但是在android环境下运行会出现被剪裁的现象,现象如下左图显示,看到这我们A.转载 2020-05-29 09:02:03 · 1603 阅读 · 0 评论 -
RN系列:Android原生与RN如何交互通信
【简述RN集成到Android原生项目】【Android项目集成RN系列:RN使用Android原生控件或自定义组件】【React Native Linking与 Android原生页面路由跳转问题】Android与RN通信.pngReact Native在Android混编项目中的页面跳转和方法调用大致可以通过上面这张简图来描述下:一、页面跳转(RN与Android原生)RN页面跳转原生 方式一: 通过下面即将讲述的方法调用实现,通过在RN中调用 NativeModule中.转载 2020-05-29 09:01:14 · 2601 阅读 · 1 评论 -
React Native 架构演进
写在前面上一篇(React Native 架构一览)从设计、线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级计划一.现有架构的局限性最初的设计也带来了一些限制: 异步:无法将 JavaScript 逻辑直接与许多需要同步答案的 Native API 集成 批处理:很难让 React Native 应用调用 Native 实现的函数 可序列化:存在不必要的 copy,而不是直接.转载 2020-05-22 09:50:03 · 419 阅读 · 0 评论 -
React Native 无限列表的优化与实践
导语本文介绍了在使用 React Native 开发过程中,如何对无限列表组件进行技术选型,如RecyclerListView组件对无限列表进行性能优化,如何解决无限列表与标签页搭配使用时的内存优化与手势重叠的问题,希望对大家有所启发。背景对于分类信息流形态的产品,用户通过左右滑动切换分类,通过不断上滑来浏览更多的信息。用标签页(Tabs)实现切换分类,用无限列表(List)实...转载 2020-02-23 09:44:19 · 1817 阅读 · 1 评论 -
React Native 性能优化指南
2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了。文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能优化的文章。本文谈到的 React Native 性能优化,还没到修改 React Native 源码那种地步,所以通用性很强,对大部分 RN 开发者来说都用得着。本文的内容,一部分是 Rea...转载 2020-01-14 20:53:36 · 1945 阅读 · 1 评论 -
ReactNaive分包方法
ReactNaive分包方法RN中,发布js代码时,会打包成jsbundle形式。随着业务的增大,jsbundle体积也会逐渐增大,特别是多Module场景下,会生成多个jsbundle(包含相同的基础)。不仅增加APP、热更新包体积,也对jsbundle的加载效率造成很大影响。针对jsbundle的拆包,成为集成RN必须考虑的问题。拆包目的解决jsbundle体积过大 按需分步加载...转载 2020-01-03 09:39:49 · 1466 阅读 · 0 评论 -
React Native 底层原理
此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。书籍还配套了视频教程「80 节实战课精通...转载 2020-01-02 12:44:08 · 378 阅读 · 0 评论 -
携程是如何做React Native优化的
React Native(下文简称RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年5月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化方案。一、背景和使用情况介绍为什么会引入React Native?1. AppSize占用携程旅行App从11年开始开发,至今已有5年多时间,随着各项业务功能的全面移动化,以及公司mobile ...转载 2020-01-02 12:43:32 · 365 阅读 · 0 评论 -
React native 拆包
拆包是React-Native项目不得不面临的一个重要技术门槛。图片来自网络为什么要拆包?bundle文件过大: 一个Helloworld的App,如果使用0.53RN 官方命令react-native bundle打包出来的JSBundle文件大小大约为530KB,RN依赖模块本身占了99.9%。页面加载慢: 如果使用热更新,从网络获取整个包的下载时间很长,每次进入RN...转载 2020-01-02 11:35:45 · 496 阅读 · 0 评论 -
reactNative性能优化
本文将简单介绍一下我所收集到的React Native应用优化方法,希望对你有所启发。很多方法也是适用React web应用的。包体积优化无论是热更新方案走网络下载js,还是直接将js打进apk,减小js bundle体积都很必要。走网络的js体积大影响首次加载速度,打进apk的增加包体积。压缩为了测试,直接使用react-native init命令生成了一个rn工程,将其中的A...转载 2020-01-02 11:23:12 · 528 阅读 · 0 评论 -
React Native之阴影效果
前言阴影效果在App中是一个很常见的需求,在css3中可有直接通过box-shadow属性实现,RN中的iOS端也可以通过下面类似的代码实现 //只支持iOS端 shadowColor: '#999', //设置阴影色 shadowOffset:{width:0,height:0}, //设置阴影偏移,该值会设置整个阴影的偏移,width可以看做x,height...转载 2020-01-02 11:18:55 · 4055 阅读 · 0 评论 -
React Native单元测试
原文https://blog.csdn.net/xiangzhihong8/article/details/83547346转载 2019-11-26 14:14:22 · 200 阅读 · 0 评论 -
React 和 ReactNative 的渲染机制/ ReactNative 与原生之间的通信 / 如何自定义封装原生组件/RN中的多线程
RN 与native 的交互0>>> React 的渲染機制1>>> react-native 渲染原理2>>> react-native 如何与原生通信3>>> 如何封装一个原生视图组件4>>> react-native 的线程管理RN的本质是利用 js 调用 native 端的...转载 2019-11-25 19:34:32 · 1263 阅读 · 0 评论 -
【RN】ReactNative与原生交互之Android篇
最近在因为项目需求需要,需要在原本的Android工程中集成RN,用RN来开发需求经常变更的、变更周期短的业务。写下这篇文章用来记述集成过程中的细节注意点以及一些学习经验。本文主要介绍RN与Android原生之间的一些交互操作,以及原生中间件的封装流程。涉及如何调用原生接口、传参、获取回调值、获取常量值、调用原生UI、监听原生发送的事件、线程操作等。一、自定义原生模块创建自定义模块...转载 2019-11-24 18:27:01 · 857 阅读 · 0 评论 -
react-navigation的多次点击重复跳转同一页面、不在堆栈路由页面使用navigation方法的解决思路、withNavigation的使用
一、react-navigation的初使用createStackNavigator ==> createSwitchNavigator ==> createAppContainercreateBottomTabNavigator ==> 自定义的底部TabNavigationActions 和 StackActions 可以获取navigation...转载 2019-10-28 11:25:36 · 1625 阅读 · 0 评论 -
React Native之原理浅析
一、JavaScriptCore讲React Native之前,了解JavaScriptCore会有帮助,也是必要的。React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与,你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上,默认的就是JavaScriptCore, iOS 7之...转载 2019-10-12 10:48:45 · 738 阅读 · 0 评论 -
React Native - 实现高度自增长的 TextInput 组件
在移动应用开发中,有时希望输入区的高度可以随着输入内容的行数增加而增长。本文演示如何实现这种自增长的TextInput组件。1,效果图(1)默认情况下TextInput组件只显示一行的高度。(2)当用户输入的内容超过TextInput组件的高度时,TextInput组件将会自动变高,把用户的所有输入都显示出来。 2,样例代码 ...转载 2019-08-30 20:30:26 · 686 阅读 · 0 评论 -
React Native---手势响应系统
前面我们写了React Native入门和React Native中的弹性盒模型(Flexbox)。今天我们谈谈React Native中的触摸事件。基本的Touch稍微有一点Android基础的人都知道,Android的触摸操作都是绑定在对应的空间上的,我们可以利用view.setOnClickListener,view.setOnTouchListener等方法响应触摸事件。Web上和...转载 2019-08-30 09:24:46 · 519 阅读 · 0 评论 -
React Native 动画(Animated)
在上篇文章中介绍了 LayoutAnimation 的用法,本篇文章就来详细介绍一下 Animated 的用法。Animated 简介Animated 库用于创建更精细的交互控制的动画,它使得开发者可以非常容易地实现各种各样的动画和交互方式,并且具备极高的性能。Animated 旨在以声明的形式来定义动画的输入与输出,在其中建立一个可配置的变化函数,然后使用简单的 start/stop 方...转载 2019-08-17 09:22:25 · 1378 阅读 · 1 评论 -
React Native 动画(Animated)笔记
学习笔记--方便下次查看大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画:1.APIAnimated.timing() -- 最常用的动画类型,使一个值按照一个过渡曲线而随时间变化。 Animated.decay() -- 衰变效果,以一个初始的速度和一个衰减系数逐渐减慢变为0。 Animated.sp...转载 2019-08-09 15:26:06 · 1220 阅读 · 0 评论 -
深入浅出 JavaScriptCore
写在前面本篇文章是对我一次组内分享的整理,大部分图片都是直接从keynote上截图下来的,本来有很多炫酷动效的,看博客的话就全靠脑补了,多图预警 :)概览JavaScriptCore 简介 Objective-C 与 JavaScript 交互 JavaScript 与 Objective-C 交互 内存管理 多线程一. JavaScriptCore 简介1.1 Ja...转载 2019-07-18 17:45:59 · 252 阅读 · 0 评论 -
React Native 热更新实现
我们先来看看React Native 动态更新实际效果:React Native 热更新实现APK我们知道, React Native所有的js文件都打包在一个jsbundle文件中,发布时也是打包到app里面,一般是放到asset目录.如是猜想是不是可以从远程下载jsbundle文件覆盖asset的jsbundle. 查资料发现asset目录是只读的,该想法行不通.在看Re...转载 2019-07-15 19:05:35 · 660 阅读 · 0 评论