react-native setNativeProps 详解

在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的人来说简直就是福音...??。但是我并没有在官方文档找到哪些属性可以用setNativeProps来操作，大家只是猜猜，嗯，style属性应该可以，于是乎就就用起来了。下面是我整理出来的可以直接操作的属性列表：
View

pointerEvents
accessible
accessibilityLabel
accessibilityComponentType
accessibilityLiveRegion
accessibilityTraits
importantForAccessibility
testID
renderToHardwareTextureAndroid
shouldRasterizeIOS
onLayout
onAccessibilityTap
onMagicTap
collapsable
needsOffscreenAlphaCompositing
style

Text
除了包含上面View的所有属性外还包括:

isHighlighted
numberOfLines
ellipsizeMode
allowFontScaling
selectable
adjustsFontSizeToFit
minimumFontScale

Image
包含View所有支持的属性， Android 与 IOS 略有不同。Android平台下，Image组件有children的时候 和 IOS支持的属性列表一样，如果Image没有children，那么它还包含如下属性：

src
defaultSource
loadingIndicatorSrc
resizeMode
progressiveRenderingEnabled
fadeDuration
shouldNotifyLoadEvents

其实上面这些东西都是在RN源码里面能找得到的，你要是不确定某个属性能否通过setNativeProps 设置的话，可以去对应组件的源码里面查看，它被封装在组件的viewConfig 属性里面。所以node_modules/react-native/Libraries/Image/Image.ios.js 里面有这样的代码:

const Image = React.createClass({
  /**
   * `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
   * make `this` look like an actual native component class.
   */
  viewConfig: {
    uiViewClassName: 'UIView',
    validAttributes: ReactNativeViewAttributes.UIView
  },
  
  ...
  render: function() {
      ...
      return (
      <RCTImageView
        {...this.props}
        style={style}
        resizeMode={resizeMode}
        tintColor={tintColor}
        source={sources}
      />
    );
  }
});

可以看出Image组件并没有把比较重要的prop source 没有被纳入到可被直接修改的列表中。在iOS 平台，RN暴露给我们的Image 是一个复合组件， 原生的RCTImageView 所接收的source 需要一个数组，而封装过的Image 需要的是一个Object， 使用setNativeProps会有点奇怪吧。还有在Android平台，RKImage 和 RCTTextInlineImage 需要的是src属性，也是一个数组。

如果你非要使用setNativeProps来改变Image的source，可以像下面这样继承Image

class MyImage extends Image {
    viewConfig = Object.assign({} , this.viewConfig, {
        validAttributes: Object.assign(
            {},
            this.viewConfig.validAttributes,
            {[Platform.OS === 'ios' ? 'source' : 'src']: true})
        });

    constructor() {
        super();
        this.setNativeProps = (props = {}) => {
            
            if (props.source) {
                const source = resolveAssetSource(props.source);
                let sourceAttr = Platform.OS === 'ios' ? 'source' : 'src';
                let sources;
                if (Array.isArray(source)) {
                    sources = source;
                } else {
                    sources = [source];
                }
                Object.assign(props, {[sourceAttr]: sources});
            }

            return super.setNativeProps(props);
        }
    }
}


// 实现
class TestDemo extends Component {
  
  // 设置source
   _setSource() {
        this._refImg.setNativeProps({
            source: {uri: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2478206899,4000352250&fm=80&w=179&h=119&img.JPEG'}
        });
    }

    render() {
         return(
            <MyImage
              ref={(c) => this._refImg = c}
              style={styles.box}
              source={{uri: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3497889018,3008123053&fm=80&w=179&h=119&img.JPEG'}} />
         )  
     }

}

但是，但是，但是，上面滴代码只是为了探讨一种方案，以及研究在RN里面setNativeProps是如何工作的，我们是 不可能 真正在项目中使用的，仅仅是学习之用。 既然都继承了一个新的类， 为什么自定义一个组件来实现想要的功能呢，用setState多方便。

对于setNativeProps 和 react 推崇的思想之间的矛盾，我觉得他们是可以共存的。 对于不同的业务/技术 场景 ，选择更适合的就是最好的。