繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

React Native调用Android原生组件_react native 显示android原生组件

作者：繁依Fanyi0 | 2024-02-23 06:14:25

踩

react native 显示android原生组件

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

创建 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);
}
创建 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()
);
  }
}
在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 <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，测试一下

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/134268