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