首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

React Native年度报告(2017-2018)

概述 在过去一年中React Native经历了从v0.40到v0.52十几次版本迭代,我们看到在这十几次版本迭代中React Native组件库不断地壮大,新引进组件中既有FlatList...通过本文希望能帮助你快速了解React Native在过去一年中重要更新,如何让你APP去更快应用React Native特性,让React Native组件及特性来提高你应用性能与体验...Native复选框组件,(目前仅支持Android,未来会对iOS做支持) ImageBackground 0.46 新增背景图片组件,它是一个容器组件...MaskedViewIOS 0.48 可以为组件添加一个透明遮罩; SafeAreaView 0.50 用于包裹其他View,它会自动应用填充布局中不足一部分,但不包括navigation bars...使用react-navigation代替; 以上便是同时React Native 2017-2018年度报告,另外你也可以通过学习《React Native实战课程》来获得React Native

2.7K60

React Native跨平台开发2017 年终总结

从2016年开始关注React Native到现在,React Native每一个版本发布我都会关注一下,虽然最近将重心转移到区块链开发上,这一年里,我还出版了一本《React Native移动开发实战...React Native年度功能 首先,借用网络一张图,一个使用Xmind绘制React Native功能图,该图简单明了介绍了React Native2017年一些变化。...CheckBox:一个用在React Native复选框组件,(目前仅支持Android,未来会支持iOS) ImageBackground:背景图片组件,它是一个容器组件,支持包含其他组件 VirtualizedList...MaskedViewIOS:可以为组件添加一个透明遮罩; SafeAreaView:用于包裹其他View,它会自动应用填充布局中不足一部分,但不包括navigation bars, tab bars...废弃组件及API 随着React Native版本更新,React Native废弃了一些过时API和组件。

2.5K70

React-Native 组件之 Modal

Modal组件可以用来覆盖包含React Native根视图原生视图(如UIViewController,Activity),用它可以实现遮罩效果。...fade:淡入视野 onRequestClose(被销毁时会调用此函数) ‘Android’ 平台,必需调用此函数 onShow(模态显示时候被调用) transparent (透明度) bool...visible(可见性) bool onOrientationChange(方向改变时调用) 模态方向变化时调用,提供方向只是 ‘’ 或 ‘’。初始化渲染时候也会调用,但是不考虑当前方向。...,模态仍然受 info.plist 中 UISupportedInterfaceOrientations字段中指定限制。...Text } from 'react-native'; export default class ModalView extends Component { constructor(props)

2.1K50

产品动效福音,AE 动画直接变原生代码

但是这无疑会加大软件开发包,Airbnb 发布 Lottie 是一个面向 iOS、Android 和 React Native 开源动画库。AE 动画直接变原生代码,很是方便。...这是一篇转载文章,文末有原文出处。 ---- Airbnb 发布 Lottie 是一个面向 iOS、Android 和 React Native 开源动画库。...1486529099358228.png 根据身边朋友试用,通过 Canvas 绘制动画非常非常流畅,并且 AE 动画没有遮罩前提下内存控制得也非常好,基本可以取代用 GIF 做动画。...我翻译 Airbnb Design 博客原文如下: 一直以来, Android、iOS、React Native 实现一套复杂动画是一件蛮困难而且耗时事。...Lottie 是一个面向 iOS、Android、React Native 动画库,能给实时绘制 After Effects 动画并且让原生 App 像使用静态素材一样使用这些动画。

2.7K20

flutter绘制基础

绘画需要工具纸、笔、图形、色彩,我们编程中也需要这些。 纸- canvas 笔-Paint 图形-Path 色-Color 接下来,我们将围绕着四要素展开,一起探索flutter绘制世界。...3.关于绘制代码 代码都会同步github,有需要可以自己看 https://github.com/taleStone/flutter_draw 4.开始绘制 我们目标 创建绘制对象-一张纸...filterQuality ↔ FilterQuality - 滤镜质量 - 控制应用滤镜(如maskFilter)或绘制图像(如drawImageRect、drawImageNine)时使用性能与质量权衡...- 图片滤镜 - 绘制光栅图片时使用 invertColors ↔ bool - 是否反色 - 绘制图像时颜色是否反色 isAntiAlias ↔ bool - 是否抗锯齿 -是否对绘制画布线条和图像应用抗锯齿...- 遮罩滤镜 -一个蒙版滤镜(如blur),用在一个形状被绘制但还没被合成到图像之前。 shader ↔ Shader?

88730

面向前端 Lottie & AE 动画手把手入门教学

值得一提是, Lottie Web 是借助 Canvas 或者 SVG 来渲染动画, 动画关键帧导出时已经被计算好了, 除了解析JSON之外基本没有性能损耗, 因此效率非常高! 二....因为目前位移属性实际是集合和X轴位移和Y轴位移两个属性, 从曲线也能反映出来, 下面那条平行于X轴直线表示X轴位移。...将时间轴移到0, 度属性设置为0, 点击度左侧时钟小图标, 开始纪录该属性关键帧。 ?...然后将时间轴移到下一次Y轴坐标的最低点, 与位移动画第二个关键帧对齐, 点击度属性左侧菱形激活当前关键帧属性记录。 ?...- airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native

2.6K50

OpenCV4 新特性 - 图像无缝克隆函数演示

),主要是针对图像编辑,局部修改等应用场景实现迁移对象与原图像场景无缝克隆。...相关函数与参数说明如下: seamlessClone(InputArray src, // 输入待克隆图像,三通道InputArray dst, // 输入克隆目标图像,三通道InputArray...mask, // 遮罩层,大小跟src图像一样大Point p, // 克隆图像在dst图像中心位置OutputArray blend, // 克隆完成输出图像int flags // 克隆方法选择...) 支持克隆方法有三种分别如下 - NORMAL_CLONE 把待克隆src对象完整插入到dst目标图像图像中去,不改变其轮廓特征与结构 - MIXED_CLONE 混合克隆跟正常克隆相比,它会把背景颜色与纹理考虑进去...演示程序主要是基于图像二值化实现自动遮罩层提取生成,然后基于遮罩图像,原图像、目标图像使用无缝克隆算法生成混合之后输出图像

86420

web 环境运行 react-native 页面

背景 近两年来react-native构造原生应用异常火爆,app中用来替代H5页面可以明显提升用户体验,但是一些场景是需要配套web版本,比如分享、seo或者react-native报错时降级方案等...由于react-native页面都是基于react-native基础组件和API或者自己实现module,react-native页面的代码是完全可以复用。...,通过webpack打包时映射到对应web组件,例如路由组件web用是RouterContext.web.js, native用RouterContext.js 实践过程中有遇到些问题,列举两个影响和改动较大问题...这样会影响固定顶部、底部、遮罩布局,web端需要增加position:fixed样式,和native样式需要区分开。...由于preact去掉了合成事件,所有的事件都是绑定到dom,对应react-native触摸手势事件需要用原生事件替代,组件手势事件prop改为原生touch事件prop。

4.1K01

React Native应用添加屏幕捕捉功能

在这个教程中,我们将通过实际演示来展示这个库功能。你可以GitHub查看我们简单演示应用完整代码。...React Native应用中使用屏幕捕捉用例 游戏应用中,提供屏幕截图功能可以让用户社交媒体与朋友分享他们分数、完成关卡和游戏内成就。...这是因为 react-native-view-shot 向应用添加了新原生代码。 构建完成并安装到你设备后,你可以开始在你React Native应用中使用这个库来捕获屏幕或视图。...例如,我们上面演示示例是React Native v0.71.8设置和测试。...总结 在这篇文章中,我们探讨了如何使用 react-native-view-shot 库React Native应用中捕获屏幕或特定视图。你可以GitHub查看我们简单演示完整代码。

24510

前端 + AI —— 走进无码时代

从图片分离组件区域 组件区域分离主要是通过图像分割算法,识别组件区域(前景)和背景区域,本文主要从用户框选操作考虑,采用了可交互可迭代Grab Cut算法。...方法时,我们将组件前景框(x, y, width, height)作为方法入参,识别出组件像素被存储mask遮罩。...3.1 圆角计算 样式定义中,圆角被限制矩形四个顶点处,圆角弧度取决于它半径,因此圆角计算主要目标就是识别圆角半径。 根据圆角4个方位,我们将组件区域划分为4块进行逐块分析。...一开始,我们采用直接对圆弧点进行曲线拟合,但由于圆角点数据过于集中,拟合误差很大,如图: 我们知道,圆角经过十字对称后能构造出一个圆形,因此,只要我们确定了“圆角”候选区域,构造十字轴对称图...3.1.2 候选区域验证 这一步先构造轴对称图像,主要是水平和竖直方向依次做翻转+拼接操作。

1.2K30

Flutter vs React Native vs Native:深度性能比较

我们还使用AndroidRecyclerView.SmoothScroller来自动化滚动速度。iOS和React Native,我们使用了带有计时器方法,并以编程方式滚动到位置。...每种情况下,我们都使用每个平台具有不同库图像缓存。更多细节可以源代码中揭示。...在这种情况下使用第三方库: iOS: 加载和缓存图像 — Nuke Android: 加载和缓存图像 — Glide React Native: 加载和缓存图像React-native-fast-image...iPhone 6s test FPS,React Native结果比Flutter和Swift差。原因是无法iOS使用IoT编译。 内存。...我们使用了Android,iOS,React Native使用Lottie进行动画处理矢量动画,并在Flutter使用了与Flare相同动画。

3.5K20

React Native 常用 15 个库

本篇 React native 库列表不是从网上随便找, 这些是我应用中亲自使用库。 这些库功能可能跟其它库也有,但经过大量研究并在我程序中尝试后,我选择了这些库。 15....通过 Android 中处理后退按钮,该组件也做得很好。 示例:提交帖子 9. React Native Progress 应用程序中,显示加载或任何其他操作进度是很重要。...当然,这不是React Native 特定问题。 当存在高分辨率图像时,内存问题在 Android 很常见。 5....React Native Image Picker 这是图像上传或图像处理基本库。 它支持从图库中选择,从相机拍摄照片。...它具有应用程序中使用 Modals 所需所有功能。 实际案例 ? 1. React Native Router Flux ?

5.7K31

React Native热更新方案

虽然React Native目前来说仍有不少坑,不过对于以应用开发为主App来说完全可以胜任。...热更新方案中,比较出名有微软 CodePush,React Native中文网pushy,调研初期,我们参考了携程jsbundle 拆分和加载优化方案,但这个方案需要改变 React Native...热更新实现方案 当下选择使用 React Native 项目大都是基于原有项目的基础上进行接入,即所谓混合开发,而这些混合代码中,为了不增加带代码难度(理解和维护难度),也只是将部分非核心代码...使用pushy进行热更新 本部分来自官方文档 不过需要注意是:笔者mac没有成功,window是可以… 安装命令 在你项目根目录下运行以下命令: npm install -g react-native-update-cli...首先需要做就是生成 common.bundle ,新建一个 blank.android.js 文件,文件中仅引入 reactreact native

9.3K70

卡牌特效: svg不规则倒计时动效

导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求企鹅电竞PC官网上实现一种卡牌效果,不规则图片叠加倒计时效果。...此时填充位置刚好覆盖到中心 这里需要注意是stroke-dasharray起始位置右侧,而不是上方,因此,需要使用transform逆时针旋转90°,所以通过添加class="transformNe90...实现切割半透明倒计时蒙版 1. css遮罩层 了解svg蒙版,先了解一下css遮罩mask属性,css mask遮罩属性是一个很古老属性,它原理是黑透白不透,它是基于图像alpha计算遮罩程度...但是有些地方是半透明是怎么回事,实际svgmask属性,其遮罩类型是luminance,也就是基于亮度来进行遮罩。...由于为了把circle倒计时起点设置为顶部,加了类transformNe90旋转了90度,因此图形遮罩,需要设置类transform90实现反方向90度旋转:

2.1K30

Supernova, 一款将设计图生成 App UI辅助工具

它可以帮助设计师将Sketch 和 Adobe XD 原型导出Flutter、iOS、Android、React Native代码,帮助工程师们大大减少花费拼 UI 时间消耗。...可自动实现功能: 将设计图层转化为 Flutter、iOS、Android、React Native 控件 生成控件样式、对控件进行进一步设计 创建页面之间关系链 全自动生成响应式布局 智能检测...比如移除冗余元素、修正颜色及透明度、创建或智能合并路径、导出图片资源、运用遮罩等等。总之,程序员们再也不会因为处理这类元素而烦躁到想砍人了!...Supernova 允许你使用与 Flutter、iOS、Android、React Native 一样自动布局系统来实现布局,并且已经为你去除了最复杂那部分工作——计算各种约束限制。...在你创建了按钮、表格之类控件之后,只需点击「Solve screen」,自动布局就完成了。再切换到「Interactive」模式,就可以各种尺寸设备预览了。

2K10

React Native性能优化:应该做和不应该做

React Native默认情况下性能是没有问题,但是实际开发React Native时候,我们也可能会遇到一些性能相关问题。 这些问题是很难通过组件本身修复去解决。...这个库iOS和安卓都可用并且能够有效缓存图片 使用适当大小图片 如果React Native APP依赖于使用大量图像,那么优化图像对于APP性能是很重要。...如果图片尺寸没有得到合适优化,渲染大量图片会导致设备占用大量内存。...因此React中可用优化方法也适用于React Native。一个优化方法就是避免不必要渲染,函数组件中可以通过使用React.memo()来完成。...这是一个给iOS、安卓和React Native使用平台 。它直接集成原生代码中,并且React Native中开箱即用。 使用Flipper调试app不需要远程调试。

4K30

中秋节祝福程序源代码分享:土地分类数据阈值筛选和重投影分类

该项目由欧洲环境署(EEA)欧盟哥白尼计划框架内进行协调,并由国家小组实施。...CLC2018是Corine土地覆盖计划框架内产生数据集之一,涉及2018年土地覆盖/土地利用状况。第一个CLC清单参考年份是1990年,第一次更新是2000年。后来,更新周期变为6年。...投影坐标与基准坐标系之间转换,以WKT字符串形式指定。不能同时指定这个参数和 "transform"。 返回。投影 updateMask(mask) 在所有现有遮罩不为零位置更新图像遮罩。...该选项与scale选项互斥,并取代投影已有的任何变换。...radius (Float, default: 1.5): 要使用内核半径。 kernelType(字符串,默认为 "")。 要使用类型。选项包括。

8310
领券