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

1.创建 MyButtonManager.java类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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中 添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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，测试一下