React Native调用Android原生组件

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

1. 创建 MyButtonManager.java类  
   public class MyButtonManager extends SimpleViewManager {
   
       @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 createNativeModules(ReactApplicationContext reactContext) {
           return Collections.emptyList();
       }
   
       @Override
       public Listextends JavaScriptModule>> createJSModules() {
           return Collections.emptyList();
       }
   
       @Override
       public List createViewManagers(ReactApplicationContext reactContext) {
           return Arrays.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

  {...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:"干的漂亮!!!!!!!!!!!"

  });

}

  style={styles.myButton}

  text={'哈哈'}

  textSize={12}

  onChangeMessage={()=>this._onButtonPress()}

  />

样式：

var styles = StyleSheet.create({

...

  myButton: {

  width: 200,

  height: 100,

  },

});

over，测试一下