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

使用setNativeProps需要注意的几点：

  首先 setNativeProps只能用在RN的核心组件（被native支持）上，不能用在混合组件上。

对于受控的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设置的话，可以去对应组件的源码里面查看，它被封装在组件的viewConfig属性里面，所以node_module/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推崇的思想之间的矛盾，我觉得他们是可以共存的。对于不同的业务、技术、场景，选择合适的就是最好的