React Native调用Android原生组件

本文介绍如何使用 ReactNative 调用 Android 原生 Button 组件,并实现点击事件监听。通过创建 MyButtonManager 和 MyReactPackage 类,以及对应的 JavaScript 模块 MyButton.js,实现了 Button 的属性设置和事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值