React Native调用Android原生组件

React Native调用Android原生组件，官方文档用ReactImageView,
后来参考这个哥们写的非常不错.https://github.com/1008611/RN-Resource-ipk。自己比葫芦画瓢，写了个调用Button的例子。以及响应OnClickListener事件。

1.创建 MyButtonManager.java类

    public class MyButtonManager extends SimpleViewManager<Button> {

        @Override
        public String getName() {
            return "MyButton";
        }

    @Override
    protected Button createViewInstance(final ThemedReactContext reactContext) {

    final Button button = new Button(reactContext);
    button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                WritableMap nativeEvent = Arguments.createMap();
                nativeEvent.putInt("clickMe", -1);
                // nativeEvent.putString("clickMe", "click");
                 reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                 button.getId(), "topChange", nativeEvent
              );
            }

         });
         return button;
    }

    @ReactProp(name="text")
    public void setText(Button view,String text){
        view.setText(text);
    }
    @ReactProp(name="textSize")
    public void setTextSize(Button view,float fontSize){
        view.setTextSize(fontSize);
    }
    @ReactProp(name="textColor",defaultInt = Color.RED)
    public void setTextColor(Button view,int textColor){
        view.setTextColor(textColor);
    }

2.创建 MyReactPackage.java类

    public class MyReactPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }

        @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
        }

        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Arrays.<ViewManager>asList(
                    new MyButtonManager()
            );
        }
    }

3. 在MainApplication中添加 new MyReactPackage()

4. 创建MyButton.js

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

var iface = {
  name:'MyButton',
  propTypes:{
  text:PropTypes.string,
  textSize:PropTypes.number,
  textColor:PropTypes.number,
  testID:PropTypes.string,
  accessibilityComponentType:PropTypes.string,
  accessibilityLabel:PropTypes.string,
  accessibilityLiveRegion:PropTypes.string,
  renderToHardwareTextureAndroid:PropTypes.bool,
  importantForAccessibility:PropTypes.string,
  onLayout:PropTypes.bool,
  }
};

var MyButtonView=requireNativeComponent('MyButton',iface);

class MyBtnView extends Component{
  constructor(){
      super();
      this._onChange=this._onChange.bind(this);
  }
  _onChange(event:Event){
      if(!this.props.onChangeMessage){
      return;
  }
  if(event.nativeEvent.clickMe===-1){
      this.props.onChangeMessage();
      return;
    }
  }
  render(){
  return <MyButtonView
    {...this.props}
    onChange={this._onChange} />
  }
}
MyBtnView.propTypes={
  onChangeMessage:React.PropTypes.func,
}
module.exports =MyBtnView;

5.在index.android.js中 添加

   var MyButton = require('./MyButton');
   ....
   _onButtonPress(){
     alert("测试点击事件");
     this.setState({
     text:"干的漂亮!!!!!!!!!!!"
     });
   }
   <MyButton
     style={styles.myButton}
     text={'哈哈'}
     textSize={12}
     onChangeMessage={()=>this._onButtonPress()}
     />
   样式：
   var styles = StyleSheet.create({
   ...
     myButton: {
     width: 200,
     height: 100,
     },
   });

over，测试一下