react-native setNativeProps 详解

最新推荐文章于 2022-03-18 19:30:49 发布

barnett_y

最新推荐文章于 2022-03-18 19:30:49 发布

阅读量1.1k

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章 31 订阅

订阅专栏

在React-Native里面，如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈，不得不放弃通过触发render的方式来改样式，而是通过setNativeProps 来直接更改原生组件的样式属性来达到相同的效果。如下图：

http://www.jianshu.com/p/638c85b9bb66

header渐变效果

上图中的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的人来说简直就是福音...