React Native调用Android原生组件

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

创建 MyButtonManager.java类
public class MyButtonManager extends SimpleViewManager
创建 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()
);
  }
}
在MainApplication中添加 new MyReactPackage()
创建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，测试一下

更多相关文章

随机推荐