在React-Native里面,如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈,不得不放弃通过触发render的方式来改样式,而是通过setNativeProps 来直接更改原生组件的样式属性 来达到相同的效果。如下图:
上图中的header渐变和搜索框出现都是直通过setNativeProps来实现的。因为header要响应滚动事件,如果使用setState来实现的话,那么render会被频繁的触发,动画会比较卡顿,所以这种情况下,setNativeProps就能派上用场了。
实现图中的效果代码很简单,但是冗余代码比较多,所以就不拿来做示例了。下面的代码实现了一个Button组件,点击的时候改变背景色,这就是setNativeProps最常见的使用方式了。
class Button extends Component {
render() {
return (
<View ref={(c) => this._refButton = c} style={buttonStyles.button}
onTouchStart={(e) => this._onTouchStart(e)}
onTouchEnd={(e) => this._onTouchEnd(e)}
>
<Text style={buttonStyles.text}>{this.props.children}</Text>
</View>
);
}
_onTouchStart(e) {
/**
* 这里直接操作style以达到效果
* @type {Object}
*/
this._refButton.setNativeProps({
style: {backgroundColor: '#666'}
});
}
_onTouchEnd() {
this._refButton.setNativeProps({
style: {backgroundColor: '#999'}
});
}
}
那么我们究竟需要在何种情况下使用直接操作?在RN文档里是这样描述的:
在(不得不)频繁刷新而又遇到了性能瓶颈的时候。
直接操作组件并不是应该经常使用的工具。一般来说只是用来创建连续的动画,同时避免渲染组件结构和同步太多视图变化所带来的大量开销。setNativeProps
是一个“简单粗暴”的方法,它直接在底层(DOM、UIView等)而不是React组件中记录state,这样会使代码逻辑难以理清。所以在使用这个方法之前,请尽量先尝试用setState
和shouldComponentUpdate方法来解决问题。
可以看出,setNativeProps有时候非常的好使,对于用惯了JQ的人来说简直就是福音...