RN这个神操作,客官了解一下

Wesley13
• 阅读 772

在react-native中我们可以通过setNativeProps直接改动组件并触发局部刷新,不用使用props或state.

对此,官方的说明以及使用场景:

什么时候使用 setNativeProps 呢?在(不得不)频繁刷新而又遇到了性能瓶颈的时候。

直接操作组件并不是应该经常使用的工具。一般来说只是用来创建连续的动画,同时避免渲染组件结构和同步太多视图变化所带来的大量开销。setNativeProps是一个“简单粗暴”的方法,它直接在底层(DOM、UIView 等)而不是 React 组件中记录 state,这样会使代码逻辑难以理清。所以在使用这个方法之前,请尽量先尝试用setState和shouldComponentUpdate方法来解决问题。

源码中对Image中的组件属性描述:

node_modules/react-native/Libraries/Image/Image.android.js

RN这个神操作,客官了解一下

node_modules/react-native/Libraries/Image/Image.ios.jsnode_modules/react-native/Libraries/Image/Image.ios.js

node_modules/react-native/Libraries/Image/Image.ios.js

RN这个神操作,客官了解一下

通过以上内容,我们可以看到,在通过image使用setNativeProps直接修改图片源的时候,在设置的时候还是不一样的,Android端是src, IOS端是source,需要注意这一点,

使用方法如下:

1.导入resolveAssetSource

import resolveAssetSource from 'resolveAssetSource'

2.图片组件

<Image

3.需要修改图片的地方

let sourceAttr = Platform.OS === 'ios' ? 'source' : 'src';

ok,大功告成。

: react-native开发之旅,痛并快乐着。😀

本文分享自微信公众号 - 君伟说(wayne90214)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Alex799 Alex799
4年前
Vue进阶(幺肆拐):利用Vue中keep-alive快速实现页面缓存
引入场景有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keepalive组件。官网解释:<keepalive包裹动
Stella981 Stella981
3年前
React知识杂烩(持续更新)
每隔半年不看官方文档,你就会不认识React了😁React组件生命周期受控组件与非受控组件多个输入的解决方法Props.children可以传递任何数据包括函数布尔值、Null和Undefined被忽略使用PropTypes进行类型检查(直接参考官方文档)reactredux
Stella981 Stella981
3年前
FLutter父子组件通信
本文介绍flutter父子组件数据传递和回调.还是以之前的代码为例Flutter\_DayByDay(https://gitee.com/Royce_he/Flutter_DayByDay)由于之前用ReactNative写项目,顺便对比一下RN父组件直接在xml标签中写属性{值/方法},子组件通过props去取属性和方法
布局王 布局王
1星期前
鸿蒙Next仓颉语言开发实战教程:下拉刷新和上拉加载更多
在移动应用中,各种列表页面离不开下拉刷新和上拉加载更多,我们的商城应用也是如此。今天介绍一下在仓颉开发语言中如何实现这一功能。下拉刷新仓颉开发语言直接提供了下拉刷新的组件,叫做Refresh,使用起来也非常方便:@StatevarheaderLoading
程序员一鸣 程序员一鸣
1星期前
鸿蒙开发:如何实现列表吸顶
ListItemGroup组件的使用,可以说是非常的简单,如果仅仅是普通的吸顶,建议直接使用即可,如果您需要带有下拉刷新和上拉加载效果的,可以使用refresh组提供的,在使用原生的时候,有一点需要注意,那就是需要设置List组件的sticky属性,否则吸顶效果是不生效的。
程序员一鸣 程序员一鸣
1星期前
鸿蒙开发:了解$$运算符
$运算符相对来说还是比较的简单,它的出现,解决了组件状态和变量同步的问题,还有一点需要知道,在$绑定的变量变化时,会触发UI的同步刷新,当然了在你使用到该变量的时候。
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
React memo的原理、实践与思考
前言在react中,对一个组件进行点击事件等操作时,该组件以及该组件的子组件都会重新渲染。避免组件的重新渲染一般可以借助React.memo、useCallback等来实现。什么是memomemo原理memo类似于class中pureComponent的特
程序员一鸣 程序员一鸣
3个月前
鸿蒙开发:父组件如何调用子组件中的方法?
也许大家可能会有疑问,子组件更新UI,直接由装饰器触发不就行了,希望大家能够明白,以上呢只是简单的案例,在实际的开发中,子组件方法中可能很多的逻辑,比如网络请求,比如数据存储等等,并不是简单的UI更新。