react-native 原生封装地图组件,rn调用

最新推荐文章于 2024-09-13 08:57:43 发布

ahnu119

最新推荐文章于 2024-09-13 08:57:43 发布

阅读量433

点赞数

分类专栏：地图文章标签： react native

本文链接：https://blog.csdn.net/ahnu119/article/details/109814134

版权

本文详细介绍了如何在React Native应用中封装并调用原生Android和iOS的地图组件，实现rn组件与原生平台的完美结合，提供地图功能。

摘要由CSDN通过智能技术生成

1.rn组件

/* @flow*/
import React from 'react'
import { requireNativeComponent } from 'react-native'

const RCTMap = requireNativeComponent('MAMapView', null)

type propTypes = {
    data:any
};

function AMapView(props:propTypes) {
  return (<RCTMap {...props} />)
}

export default AMapView

2 原生android

package com.kuaibao.skuaidi.react.modules.map;

import android.content.Context;

import com.amap.api.maps2d.MapView;
import com.facebook.react.bridge.LifecycleEventListener;
import com.facebook.react.bridge.ReactContext;

/**
 * Created by kit on 16/12/15.
 */
public class MAMapView extends MapView implements LifecycleEventListener{
    public MAMapView(Context context) {
        super(context);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        onCreate(null);
        ((ReactContext)getContext()).addLifecycleEventListener(this);

//        ViewGroup child = (ViewGroup) getChildAt(0);
//        com.amap.api.mapcore2d.b b = (com.amap.api.mapcore2d.b) child.getChildAt(0);
//        com.amap.api.mapcore2d.aa aa = b.j.e();
//        try {
//            b.a(aa);
//        } catch (RemoteException e) {
//            e.printStackTrace();
//        }

    }

    @Override
    protected void onDetachedFromWindow() {
        ((ReactContext)getContext()).removeLifecycleEventListener(this);
        super.onDetachedFromWindow();
        onDestroy();
    }

    @Override
    public void onHostResume() {
        onResume();
    }

    @Override
    public void onHostPause() {
        onPause();
    }

    @Override
    public void onHostDestroy() {
        onDestroy();
    }
}

package com.kuaibao.skuaidi.react.modules.map;

import android.content.Context;

import com.amap.api.maps2d.AMap;
import com.amap.api.maps2d.CameraUpdateFactory;
import com.amap.api.maps2d.model.LatLng;
import com.amap.api.maps2d.overlay.WalkRouteOverlay;
import com.amap.api.services.core.AMapException;
import com.amap.api.services.core.LatLonPoint;
import com.amap.api.services.route.BusRouteResult;
import com.amap.api.services.route.DriveRouteResult;
import com.amap.api.services.route.RideRouteResult;
import com.amap.api.services.route.RouteSearch;
import com.amap.api.services.route.WalkPath;
import com.amap.api.services.route.WalkRouteResult;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.kuaibao.skuaidi.activity.picksendmapmanager.utils.ToastUtil;
import com.kuaibao.skuaidi.util.Utility;

/**
 * Created by kit on 16/12/15.
 */
public class MapViewManager extends SimpleViewManager<MAMapView>{

  private Context mContext;
  private RouteSearch mRouteSearch;

  /**
     * @return the name of this view manager. This will be the name used to reference this view
     * manager from JavaScript in createReactNativeComponentClass.
     */
    @Override
    public String getName() {
        return "MAMapView";
    }




    /**
     * Subclasses should return a new View instance of the proper type.
     *
     * @param reactContext
     */
    @Override
    protected MAMapView createViewInstance(ThemedReactContext reactContext) {
        mContext = reactContext;
        return new MAMapView(reactContext);
    }
    @ReactProp(name="data")
    public void data(MAMapView mapView , ReadableArray data){
       // ReadableArray data = data.
//        MarkerOptions markerOption = new MarkerOptions();
        ReadableMap startLocation = data.getMap(0);
        ReadableMap endLocation = data.getMap(1);

        if (Utility.isEmpty(startLocatio