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   } } 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，测试一下

更多相关文章

1. Android View绘制过程以及事件传递原理
2. 【android】点击事件穿透解决方案
3. Android 触摸事件处理机制
4. Android事件分发机制全解析
5. Android 触控事件解析（Mastering the Android Touch System）
6. Android 设置软键盘搜索键以及监听搜索键点击事件
7. Android基础03-事件处理
8. Android中Touch事件的传递机制

随机推荐

1. Android(安卓)studio调用第三方aidl
2. Android ImageView使用网络资源文件
3. 使用ant编译android工程
4. android仿新浪微薄底部菜单
5. android使用webview上传文件(支持相册和
6. android 对象保存到SP
7. Android 1比1高仿微信图片选择器（新）
8. Android VideoView实现视频播放
9. Android 图表生成开源之AChartEngine（整理
10. Android开发-Android(安卓)Jetpack 架构