React Native調(diào)用Android原生組件

React Native調(diào)用Android原生組件,官方文檔用ReactImageView,
后來參考這個哥們寫的非常不錯.https://github.com/1008611/RN-Resource-ipk。自己比葫蘆畫瓢,寫了個調(diào)用Button的例子。以及響應OnClickListener事件。

1.創(chuàng)建 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.創(chuàng)建 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. 創(chuàng)建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,測試一下

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容