reactnative 调用原生UI组件(二)，引入xml文件。

reactnative 调用原生UI组件(二)，引入xml文件

介绍

react native 调用原生的UI组件，引入原生的布局文件（xml）。

第一布 新建布局文件

<?xml version="1.0" encoding="utf-8"?>

<com.MyCustomView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:minHeight="150dp"
    android:background="#FD5C08"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"


    >

</com.MyCustomView >

第二布

import android.content.Context;
import android.view.LayoutInflater;
import com.facebook.react.common.MapBuilder.Builder;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.gxl.express.apk.R;

import java.util.Map;

public class MyCustomViewManager extends SimpleViewManager<MyCustomView> {

    public static final String REACT_CLASS = "RCTMyCustomView";

    @Override
    public String getName() { return REACT_CLASS; }

    @Override
    public MyCustomView createViewInstance(ThemedReactContext context) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        MyCustomView view = (MyCustomView)inflater.inflate(R.layout.custom_view, null);
        return view;
    }

    @ReactProp(name = "status")
    public void setStatus(MyCustomView view, Boolean status) {
        view.setStatus(status);
    }

    public Map getExportedCustomBubblingEventTypeConstants() {

        String eventName = "onClickEvent";
        String propName = "onClick";
        Map onClickHandler = MapBuilder.of("phasedRegistrationNames",MapBuilder.of("bubbled", propName));

        Builder events = MapBuilder.builder();
        events.put(eventName, onClickHandler);
        return events.build();

    }

}

第三布

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.widget.RelativeLayout;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.events.RCTEventEmitter;

public class MyCustomView extends RelativeLayout {

    private boolean status = false;

    public MyCustomView(Context context) {
        super(context);
    }

    public MyCustomView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MyCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void onFinishInflate() {
        super.onFinishInflate();

        this.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                MyCustomView.this.onClick();
            }
        });
    }

    public void setStatus(boolean status) {
        this.status = status;
        setBackgroundColor( this.status ? Color.GREEN : Color.RED);
    }

    public void onClick() {
        WritableMap event = Arguments.createMap();

        event.putString("value1","react demo");
        event.putInt("value2",1);

        ReactContext reactContext = (ReactContext)getContext();
        reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "onClickEvent", event);
    }

}

第四布

 @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList( new MyCustomViewManager()));

    }

第五布

 @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
            packages.add( new TestReactPackage());

          return packages;
        }

第六布

import React from 'react';
import { requireNativeComponent } from 'react-native';

type Props = {
  status: Boolean,
  onClick: Function
}

const RCTCustomView = requireNativeComponent('RCTMyCustomView', MyCustomView, {});

class MyCustomView extends React.PureComponent<Props> {
  _onClick = (event) => {
    if (!this.props.onClick) {
      return;
    }

    // process raw event...
    this.props.onClick(event.nativeEvent);
  }

  render() {
    return <RCTCustomView {...this.props} onClick={this._onClick}/>
  }
}

export default MyCustomView;

第七布

import MyCustomView from './../component/MyCustomView';
render() {
<MyCustomView 
          status={this.state.status}
          onClick={(event2)=>this.onClick(event2)}
          style={{ width: "100%", height: "100%" }} 
        />

}



onClick ( event2){
    // alert("Received params: " + JSON.stringify(event))
    console.log(event2)
    this.setState({status: !this.state.status})
  }