【RN桥接Android原生】第一节

创建高德地图实体类

1、在view文件夹中示例：

/**
 * 地图实体类
 * 继承于高德地图 MapView
 */
public class RNAMapView extends MapView {
    
    
    MapView mMapView = null;

    public RNAMapView(Context context) {
    
    
        super(context);
        super.onCreate(null);
    }
}

创建桥接类

1、创建 Manager文件夹
创建桥接类 RNAMapViewManager 继承于 React包中的ViewGroupManager

/*
* 桥接类
*/
public class RNAMapViewManager extends ViewGroupManager<RNAMapView> {
    
    
    private ReactApplicationContext reactApplicationContext;
    public RNAMapViewManager(ReactApplicationContext reactContext) {
    
    
        this.reactApplicationContext = reactContext;
    }

    @NonNull
    @Override
    public String getName() {
    
    
        return "AMapView";
    }

    /**
     * 重写 createViewInstance 方法，返回自定义的原生组件
     * @param reactContext
     * @return
     */
    @NonNull
    @Override
    protected RNAMapView createViewInstance(@NonNull ThemedReactContext reactContext) {
    
    
        return new RNAMapView(reactContext);
    }
}

3、注册包

public class RNAMapPackage implements ReactPackage {
    
    
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
    
    
        List<NativeModule> modules = new ArrayList<>();
        // 这里	modules.add(new NaviActivity(reactContext));意义就是添加一个安卓原生的activity模块
        // 这个模块可以定义方案,RN可以直接调用(方法上必须声明了@ReactMethod才可以)
        return modules;
    }

    @NonNull
    @Override
    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
    
    
        List<ViewManager> managers = new ArrayList<>();
        managers.add(new RNAMapViewManager(reactContext));
        return managers;
    }
}

4、加入注册的包
1、在安卓程序的app内的MainApplication内

@Override
protected List<ReactPackage> getPackages() {
    
    
  	//..... 省略
	packages.add(new RNAMapPackage());
}

RN使用

import React from "react";

import ReactNative, {
    
     requireNativeComponent, UIManager } from 'react-native';

const AMapViewComponent = requireNativeComponent('AMapView');

export default class MapViewContainer extends React.Component {
    
    
    constructor(props){
    
    
        super(props);
    }

    render(){
    
    
        return (
            <AMapViewComponent 
                ref='id_mapview'
                {
    
    ...this.props}
            />
        )
    }
}