React-Native封装Android页面为组建

纯手打，本人新手，有错误欢迎指导，转载注明。

使用场景：视频。使用方法，直接在render里用组建的方式使用原生页面。

render() {

        

}

开始，RN调用原生界面。官方说明：

官方介绍了一个封装ImageView组建的教程，使用的SimpleViewManager或者ViewManager。看了官方的还是脑壳疼。可能是基础不够吧。

实际操作：

1.创建Package类实现ReactPackage，然后在MainApplication-->createAdditionalReactPackages里面注册一下。

Package类里面有两个方法，createNativeModules/createViewManagers。这两个是看个人需求，如果是创建原生的Modules的话返回第一个，如果是创建了原生的ViewManager的话返回第二个。返回空的话可以写return Collections.emptyList();

public class AAAAAPackage mplements ReactPackage {

    @Override

    public List createNativeModules(ReactApplicationContext reactContext) {

            return  Arrays.asList(

                    new AAAAAManagerModule(reactContext)

            );

    }

    @Override

    public List createViewManagers(ReactApplicationContext reactContext) {

            return Arrays.asList(

                    new AAAAAAViewManager()

            );

    }

}

2.创建ViewManager.

实现getName，createViewInstance这两个方法，第一个是能够在JS端拿到name，第二个是返回NativeView。

public class AAAAAViewManager extends ViewGroupManager {

     protected static final String REACT_CLASS ="AAAAView";

    @Override

     public String getName() {  return REACT_CLASS;  }

     @Override 

     protected Button createViewInstance(ThemedReactContext reactContext) {                                 this.mContext = reactContext; 

             NativeView nv =new NativeView(reactContext);

             return nv; 

       }

}

const NativeView = requireNativeComponent('AAAAView', className);

JS端就可以直接调用NativeView。

3.传递参数，调用原生方法。

1.RN给原生发送参数：

    RN:------->

const NativeView = requireNativeComponent('AAAAView', className);

-----------------略略略-----------------------

render() {

        

}

给原生发送了一个src,原生接收使用ReactProp这个标注

@ReactProp(name ="src")

public void setSource(RNPLVideoPlayer view, @Nullable ReadableMap source) {

}

2.RN调用原生方法：

RN端

start = () => {

    UIManager.dispatchViewManagerCommand(

        this.getVideoPlayerHandler(),

            UIManager.getViewManagerConfig('RNPLVideoPlayer').Commands.start,

            null,

  );

};

原生端：

@Override 

 public Map getCommandsMap() {

        return MapBuilder.of("onclick", ONCLICK);

 }

@Override

public void receiveCommand(RNPLVideoPlayer view, int commandId, @Nullable ReadableArray args) {

    switch(commandId){

            case ONCLICK: {  doOnClick(view);     break;  }

            default:                                                                                                                                     throw new IllegalArgumentException(String.format( "Unsupported commandId: %d", commandId ));

    }

}

3.原生发送信息给RN：

context.getJSModule(RCTEventEmitter.class).receiveEvent(

        getId(),

        "somethings",

        event);

context是安卓上下文。

event一般是map类型，WritableMap event = Arguments.createMap();

THEN：在ViewManager.java里面注册Map getExportedCustomDirectEventTypeConstants这个方法。然后把上边事件里面的somethings注册一个name。这里用的onStatusChange，就是RN端的方法。

@Override

public Map getExportedCustomDirectEventTypeConstants() {

    Map map = MapBuilder.of();

    map.put("somethings", MapBuilder.of("registrationName", "onStatusChange"));

    return map;

}