React-Native自定义view显示（js端）

参考：http://blog.csdn.net/pz789as/article/details/52448707

上一篇是原生方面的代码，现在说下js这边的代码，由于自己水平也不够，都是参照别人的插件写的

'use strict'
import React, { Component } from 'react';
import { View } from 'react-native';
import { requireNativeComponent } from 'react-native';

class DrawView extends Component {
  setNativeProps(props){
    this.root.setNativeProps(props);
  }

  render() {
    return (
      <DrawViewNative
        {...this.props}
        style={[
          {
            backgroundColor: 'transparent',
          },
          this.props.style,
        ]}
        ref={(r)=>{this.root = r}}/>
    );
  }
}

DrawView.propTypes = {
  transPos: React.PropTypes.shape({
    x: React.PropTypes.number,
    y: React.PropTypes.number,
  }),
  scaleValue: React.PropTypes.shape({
    x: React.PropTypes.number,
    y: React.PropTypes.number,
  }),
  drawData: React.PropTypes.object,
};

const DrawViewNative = requireNativeComponent('RCTDrawView', DrawView);

export default DrawView;

这样就可以在其他地方引用了

import DrawView from './DrawView';

先引用，然后可以愉快的使用咯

<DrawView style={{
              width: parseInt(ScreenWidth), 
              height: parseInt(ScreenHeight), 
              backgroundColor:'#AAA'
            }}
              transPos={{x:this.moveViewX, y:this.moveViewY}}
              scaleValue={{x:this.scaleViewValue, y:this.scaleViewValue}}
              drawData={this.drawData}
              ref={'drawView'} />

这里有2个问题：

1，我在js这边定义的this.drawData，传入进去之后，没法再次设置里面的值，貌似内部已经变了，所以我现在只能每次变都是重新生成data，然后setNativeProps过去。

2，我自己定义的这个截取了手势时间，这个就令人很尴尬了，因为我在用的时候是在它父组件里面加了panResponder，需要手势移动和缩放，加了这个之后没有反应，现在是在父组件中加一个pointerEvents={'box-only'}，让DrawView不接受触摸事件就可以了。（只是治标不治本，没办法之举= =）