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

Wesley13
• 阅读 693

在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源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
Alex799 Alex799
3年前
Vue进阶(幺肆拐):利用Vue中keep-alive快速实现页面缓存
引入场景有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keepalive组件。官网解释:<keepalive包裹动
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Chase620 Chase620
3年前
关于:父组件中的子组件中的子组件(孙级)添加数据后怎么样去调用父组件中的方法呢?
1、需求引入image.png这是父组件下的子组件的子组件,一个绑定子设备的弹出窗modal,那么我们怎么样在这个组件中选中子设备后点击确定时去触发父组件的父组件的table列表数据刷新呢?image.pngimage.pngimage.png组件的层级关系.png上述的图示便是部分代码的展示,一般的组件传值有父组件传子组件(
Stella981 Stella981
3年前
React知识杂烩(持续更新)
每隔半年不看官方文档,你就会不认识React了😁React组件生命周期受控组件与非受控组件多个输入的解决方法Props.children可以传递任何数据包括函数布尔值、Null和Undefined被忽略使用PropTypes进行类型检查(直接参考官方文档)reactredux
Easter79 Easter79
3年前
Swing自定义事件
1.Swing自定义事件将一个组件的事件传递给另一个组件.使用EventListenerList来管理事件,当A组件触发事件的时候,调用方法fireActionPerformed()来触发事件,然后再B组件中actionPerformed()方法来接收事件.当在容器KeyTextComponent中按下鼠标,我们就可以在Jframe中捕获触发的事
Stella981 Stella981
3年前
FLutter父子组件通信
本文介绍flutter父子组件数据传递和回调.还是以之前的代码为例Flutter\_DayByDay(https://gitee.com/Royce_he/Flutter_DayByDay)由于之前用ReactNative写项目,顺便对比一下RN父组件直接在xml标签中写属性{值/方法},子组件通过props去取属性和方法
Stella981 Stella981
3年前
Knative 实践:从源代码到服务的自动化部署
通过之前的文章,相信大家已经熟悉了Serving、Eventing以及Tekton。那么在实际使用中,我们往往会遇到一些复杂的场景,这时候就需要各个组件之间进行协作处理。例如我们提交源代码之后是否直接可以部署服务到K8s中?这个场景对于用户来说很有吸引力。那么现在就让我们来看一下,在Knative中如何实现从代码到服务?(https:
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
京东云开发者 京东云开发者
9个月前
React memo的原理、实践与思考
前言在react中,对一个组件进行点击事件等操作时,该组件以及该组件的子组件都会重新渲染。避免组件的重新渲染一般可以借助React.memo、useCallback等来实现。什么是memomemo原理memo类似于class中pureComponent的特
融云IM即时通讯 融云IM即时通讯
1星期前
融云IM干货丨uni-app 在性能上如何优化?
uniapp性能优化可以从以下几个方面进行:使用生产环境构建:确保在部署到生产环境之前,使用Uniapp的生产构建版本,它会进行代码压缩和性能优化。避免不必要的数据绑定:减少使用不必要的双向绑定和计算属性,尽量直接使用props传递数据。虚拟列表渲染:对于