RN原生方法setNativeProps
https://facebook.github.io/react-native/docs/direct-manipulation.html
setNativeProps可以直接修改底层native组件的属性,不与React相关(state不会跟着同步),其他原生方法还有measure、measureLayout等
有时候有必要去直接操作组件而不是通过state或者props来触发整颗组件树的刷新。如浏览器直接修改dom,类比到RN中,可以使用setNativeProps这个方法来直接修改dom
当频繁地重新渲染导致性能瓶颈时才使用这个方法,这个方法不应该用太多,仅当需要创建持续的动画时使用。这个方法把状态保存到原生layer中而不是react组件中,这回导致代码更难理解,可以的话尽量使用setState和shouldComponentUpdate来解决。
当被按下的时候,TouchableOpacity内部会通过setNativeProps来更新子组件的透明度,子组件不需要关心自己如何改变透明度
<TouchableOpacity onPress={this._handlePress}>
<View style={styles.button}>
<Text>Press me!</Text>
</View>
</TouchableOpacity>
假设setNativeProps不可用,则实现的方式就是就是父组件要频繁调用setState来重新渲染子树,即使子组件没有发生变化。通常来说这不需要担忧,但是当我们要执行持续动画以及响应手势时,精确地优化组件可以提高动画的效果
应用场景1:混合组件
setNativeProps(原生方法)只能用在RN的核心组件(被native支持)上,不能用在混合组件上。
class MyButton extends React.Component {
render() {
return (
<View>
<Text>{this.props.label}</Text>
</View>
)
}
} export default class App extends React.Component {
render() {
return (
<TouchableOpacity>
<MyButton label="Press me!" />
</TouchableOpacity>
)
}
}
以上代码 运行会报错:“Touchable child must either be native or forward setNativeProps to a native component”。这是因为TouchableOpacity内部会获取自己的子组件,然后调用他们的setNativeProps来改变透明度,而MyButton不是核心组件不支持这个方法。解决办法就是使这个混合组件MyButton支持这个方法,就自己定义一个setNativeProps:
class MyButton extends React.Component {
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View ref={component => this._root = component} {...this.props}>
<Text>{this.props.label}</Text>
</View>
)
}
}
可以发现上面有{...this.props},这是因为需要子组件去处理触摸事件,这handler就要来自于Touchable,相当于调用了父组件的方法。
应用场景2:清空输入
对于受控的TextInput,当bufferDelay设置比较小而且用户输入比较快时,可能会丢失字符。所以一些开发者干脆直接使用setNativeProps来TextInput的值。以下清空值
export default class App extends React.Component {
clearText = () => {
this._textInput.setNativeProps({text: ''});
}
render() {
return (
<View style={{flex: 1}}>
<TextInput
ref={component => this._textInput = component}
style={{height: 50, flex: 1, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}}
/>
<TouchableOpacity onPress={this.clearText}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
}
注意,这原生方法仅仅改变了原生组件上的值,RN中的state并没有发生变化,也不会触发这个TextInput上的onChange事件
RN原生方法setNativeProps的更多相关文章
- RN原生调用一:安卓Toast
首先安卓原生方法:Toast.makeText(getApplicationContext(), "默认的Toast", Toast.LENGTH_SHORT); 在RN中js如何 ...
- RN原生的安卓UI组件
https://facebook.github.io/react-native/docs/native-components-android.html 这里有一大堆的原生组件可以用,一些是平台自带的, ...
- 通过js调用android原生方法
有时候我们有这样一个需求,监听html中控件的一些事件.例如点击html中某个按钮,跳转到别的activity,复制某段文本. 首先是对webview的设置: myWebView = (WebView ...
- 再探JS数组原生方法—没想到你是这样的数组
最近作死又去做了一遍javascript-puzzlers上的44道变态题,这些题号称"JS语言专业八级"的水准,建议可以去试试,这里我不去解析这44道题了, ...
- 【转】3篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:官方原生方法分析
作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
- javacpp-opencv图像处理3:使用opencv原生方法遍历摄像头设备及调用(增加实时帧率计算方法)
javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置.大小.粗度.翻转.平滑等操作 javaCV图像处理之2:实时视频添加图片水 ...
- JS 中 原生方法 (四) --- Object
Javascript 中 str. arr.date.obj 等常见的原生方法总结 本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道, ...
- JS 中 原生方法 (三) --- Date 日期
本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...
随机推荐
- A - Musical Theme + 二分
#include <bits/stdc++.h> using namespace std; #define LS 2*i #define RS 2*i+1 #define UP(i,x,y ...
- POJ-3159-Candies-(差分约束,Dijkstra)
链接:https://vjudge.net/problem/POJ-3159 题意: N个小孩,M个约束 以A,B,C给出.即小孩B的糖果不能比A多C以上. 思路: 差分约束: 若有 A-B < ...
- 转 open_cursors参数设置调优
https://www.cnblogs.com/Peyton-for-2012/archive/2013/05/07/3065058.html
- [译]Understanding ECMAScript 6 说明
说明 JavaScript核心语言功能定义在ECMA-262中,此标准定义的语言是ECMAScript,浏览器中的JavaScript和Node.js环境是它的超级.当浏览器与Node.js想要通过额 ...
- DDX_Text详细用法
void AFXAPI DDX_Text( CDataExchange* pDX, int nIDC, BYTE& value ); void AFXAPI DDX_Text( CDataEx ...
- 《高性能MySQL》读书笔记之 MySQL锁、事务、多版本并发控制的基础知识
1.2 并发控制 1.2.1 读写锁 在处理并发读或写时,通过实现一个由两种类型的锁组成的锁系统来解决问题.这两种类型的锁通常被称为 共享锁(shared lock) 和 排它锁(exclusive ...
- 能挣钱的微信JSSDK+H5混合开发
H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...
- 4G牌照影响
与3G牌照发放整整讨论了10年不同,4G牌照发放在2009年3G规模建设4年后就进行了发放,也颇匹配于行业的加速度.那么,4G到底会在哪些方面.在何种程度上改变中国呢?其实,4G的影响可能没有那么大, ...
- IOS生成UUID
/** * 生成GUID */ + (NSString *)generateUuidString{ // create a new UUID which you own CFUUIDRef uuid ...
- 用python格式化小说txt
下载了<无人生还>的txt版.传到手机,发现阅读器识别得不够好. 原文格式如下: 第一章 一 沃格雷夫法官先生新近离任退休,现在正在头等车厢的吸烟室里,倚角而坐,一 边喷着雪茄烟,一边兴致 ...