RN 小白看了都会写的原生组件

目录
一、前言
二、iOS原生组件
三、Android原生组件
四、ReactNative整合

一、前言

好好学习，天天向上，是程序员必备的基本品质，作为移动开发者不掌握几门语言还真不行，比如做iOS开发，需要掌握Object-C和Swift，高级一点的还得会C和C++，混合开发盛行之际还得掌握JavaScript，现在Flutter又火了，是不是也得了解一下Dart。学习是无止境的，有时候知识面宽广也是一种优势，但是也不能什么都是蜻蜓点水，起码得精通一门语言，每种语言都会个Hello Word估计找工作都很艰难。接下来一起回顾一下怎么用ReactNative封装Android和iOS原生组件吧！这里主要介绍高德地图如何绘制点标记，刚开始查了一下资料没有找到如何写回调方法，都是仿官方文档写ImageView组件的封装。

二、iOS原生组件

YFRNMapView继承RCTViewManager类就可以被RN调用，下面ReactNative整合会介绍。RCT_EXPORT_VIEW_PROPERTY主要用来传递参数用的，RCTBubblingEventBlock定义的时候一定要用on开头。

@interface YFRNMapView()
@property(nonatomic,strong)YFMapView *mapView ;
@end
@implementation YFRNMapView
RCT_EXPORT_MODULE()
- (UIView *)view {
 _mapView=[[YFMapView alloc]initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight-YFStatusHeight-44)];
  return _mapView;
}
RCT_EXPORT_VIEW_PROPERTY(type, NSString)
RCT_EXPORT_VIEW_PROPERTY(deviceArray, NSArray)
RCT_EXPORT_VIEW_PROPERTY(onClick, RCTBubblingEventBlock)
@end

暴露 type， deviceArray，onClick，并重写set方法。

@interface YFMapView ()<MAMapViewDelegate>
@property(nonatomic,strong) MAMapView *mapView;
@end
@implementation YFMapView
 - (instancetype)initWithFrame:(CGRect)frame
{
  self = [super initWithFrame:frame];
  if (self) {
       self.backgroundColor=YFColorRGB(246, 246, 250);
        self.mapView = [[MAMapView alloc] initWithFrame:self.bounds];
        self.mapView.delegate=self;
        self.mapView.rotateEnabled=NO;
        [self.mapView setZoomLevel:16];
        [self addSubview:self.mapView];
  }
  return self;
}


- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id <MAAnnotation>)annotation
 {
     if ([annotation isKindOfClass:[MAUserLocation class]]) {
         return  nil;
     }
     if ([annotation isKindOfClass:[YFPointAnnotation class]])
     {
         __weak typeof(self) weakSelf=self;
         static NSString *pointReuseIndentifier = @"pointReuseIndentifier";
         MAPinAnnotationView*annotationView = (MAPinAnnotationView*)[mapView dequeueReusableAnnotationViewWithIdentifier:pointReuseIndentifier];
         if (annotationView == nil)
         {
             annotationView = [[MAPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:pointReuseIndentifier];
         }
  
         annotationView.imageView.contentMode=UIViewContentModeScaleAspectFit;
         YFPointAnnotation *yfAnnotation=(YFPointAnnotation*)annotation;
        if (yfAnnotation.tag==1) {
             [annotationView.imageView sd_setImageWithURL: [NSURL URLWithString:[NSString stringWithFormat:@"%@", yfAnnotation.deviceDict[@"device_icon"]]]];
              UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] init];
              [[tap rac_gestureSignal] subscribeNext:^(id x) {
          
                 NSString *deviceID = [NSString stringWithFormat:@"%@", yfAnnotation.deviceDict[@"device_id"]];
                  weakSelf.onClick(@{@"deviceId":deviceID});
              }];
              [annotationView addGestureRecognizer:tap];
              return annotationView;
        }else{
          [annotationView.imageView sd_setImageWithURL: [NSURL URLWithString:[NSString stringWithFormat:@"%@", yfAnnotation.deviceDict[@"status_icon"]]]];
                       UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] init];
                       [[tap rac_gestureSignal] subscribeNext:^(id x) {
                   
                          NSString *dalarmID = [NSString stringWithFormat:@"%@", yfAnnotation.deviceDict[@"alarm_id"]];
                           weakSelf.onClick(@{@"alarmId":dalarmID});
                          
                       }];
                       [annotationView addGestureRecognizer:tap];
                       return annotationView;
        }
       
         return annotationView;
     }
     return nil;
 }

-(void)setOnClick:(RCTBubblingEventBlock)onClick{
  _onClick=onClick;
}

-(void)setDeviceArray:(NSArray *)deviceArray{
  if (deviceArray) {
    _deviceArray=deviceArray;
    
    NSMutableArray *pointArray=[NSMutableArray array];
     for (NSDictionary *dict in  deviceArray) {
       NSLog(@"%@",dict);
       YFPointAnnotation *pointAnnotation = [[YFPointAnnotation alloc] init];
       float lat=[dict[@"lat"] floatValue];
        float lng=[dict[@"lng"] floatValue];
       if ([dict[@"gis_type"] intValue]==1) {
         if (lat>0 && lng>0) {
            pointAnnotation.coordinate =[YFLocationConverter wgs84ToGcj02:CLLocationCoordinate2DMake(lat,lng)];
         }else{
           continue;
         }
          
       }else{
           if (lat>0 && lng>0) {
           pointAnnotation.coordinate = CLLocationCoordinate2DMake(lat,lng);
           }else{
              continue;
           }
       }
       pointAnnotation.deviceDict=dict;
       if ([self.type isEqualToString:@"alarm"]) {
           pointAnnotation.tag=2;
       }else{
          pointAnnotation.tag=1;
       }
      
       [self.mapView addAnnotation:pointAnnotation];
       [pointArray addObject:pointAnnotation];
     }
     [self.mapView showAnnotations:pointArray animated:YES];
  }
}

三、Android原生组件

在封装NativeModule (原生模块) 的时候，定义了ReactContextBaseJavaModule的子类，并实现了getName、@ReactMethod注解的供RN调用的通信方法等。创建原生UI组件需要我们定义SimpleViewManager的子类，并实现getName、createViewInstance、@ReactProp注解的方法。

public class YFMapViewManager extends SimpleViewManager<YFRNMapView> {
    public static final String REACT_CLASS = "YFRNMapView";

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

    @Override
    protected YFRNMapView createViewInstance(ThemedReactContext reactContext) {
        return new YFRNMapView(reactContext);
    }

    @ReactProp(name = "deviceArray")
    public  void setDeviceArray(YFRNMapView mapView, ReadableArray deviceArray){

        mapView.setDeviceArray(deviceArray);

    }
   @ReactProp(name = "type")
    public  void setType(YFRNMapView mapView, String type){
        mapView.setType(type);
   }

    @Override
    protected void addEventEmitters(
            final ThemedReactContext reactContext,
            final YFRNMapView view) {
    }

    @Override
    public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
        return MapBuilder.<String, Object>builder()
                .put("onClick", MapBuilder.of("registrationName", "onClick"))//registrationName 后的名字,RN中方法也要是这个名字否则不执行
                .build();
    }
}

注册UI模块，定义ReactPackage的子类，即包管理类，并将其添加。还需要将YFMapPackage类添加到Application的getPackages。

public class YFMapPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

通过receiveEvent实现函数回调，执行onClick方法。

public class YFRNMapView extends FrameLayout {

    private MapView MAPVIEW;
    private ThemedReactContext CONTEXT;
    private ViewGroup.LayoutParams PARAM;
    private AMap AMAP;
    private  String TYPE;

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

    }

    public YFRNMapView(ThemedReactContext context) {
        super(context);
        this.CONTEXT = context;
 PARAM = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    }

    /**
     * Activity onResume后调用view的onAttachedToWindow
     */
    @Override
    protected void onAttachedToWindow() {
        init();
        super.onAttachedToWindow();
    }

    /**
     * 初始化控件,定位位置
     */
    private void init() {
        MAPVIEW = new MapView(CONTEXT);
        MAPVIEW.setLayoutParams(PARAM);
        this.addView(MAPVIEW);
        MAPVIEW.onCreate(CONTEXT.getCurrentActivity().getIntent().getExtras());

        setMapOptions();

    }

    /**
     * 设置一些amap的属性
     */
    private void setMapOptions() {

        AMAP = MAPVIEW.getMap();
        AMAP.setMapType(AMap.MAP_TYPE_NORMAL);// 矢量地图模式

        AMap.OnMarkerClickListener markerClickListener = new AMap.OnMarkerClickListener() {
            // marker 对象被点击时回调的接口
            // 返回 true 则表示接口已响应事件，否则返回false
            @Override
            public boolean onMarkerClick(Marker marker) {
             
                WritableMap eventMap = Arguments.createMap();
                if(TYPE == "alarm") {
                    eventMap.putString("alarmId", marker.getTitle());
                }else {
                    eventMap.putString("deviceId", marker.getTitle());
                }

                ReactContext reactContext = (ReactContext) getContext();
                reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                        getId(),
                        "onClick",
                        eventMap);

                return true;
            }
        };
        // 绑定 Marker 被点击事件
        AMAP.setOnMarkerClickListener(markerClickListener);
   }

    public  void setType(String type){
        TYPE=type;
    }
    public void setDeviceArray(ReadableArray deviceArray) {
        LatLngBounds.Builder builder = new LatLngBounds.Builder();
        LatLngBounds bounds = null;
        for (int i = 0; i < deviceArray.size(); i++) {
            ReadableMap map = deviceArray.getMap(i);
            double lat = convertToDouble(map.getString("lat"),0);
            double lon =convertToDouble(map.getString("lng"),0) ;

            LatLng sourceLatLng =new LatLng(lat, lon);
            LatLng desLatLng=null;
            int gisType=map.getInt("gis_type");
            if(lat>0 && lon>0) {
                if (gisType == 1) {
                    CoordinateConverter converter = new CoordinateConverter(getContext());
                    converter.from(CoordinateConverter.CoordType.GPS);
                    converter.coord(sourceLatLng);
                    desLatLng = converter.convert();
                } else {
                    desLatLng = sourceLatLng;
                }
                Log.i("ReadableMap",desLatLng.toString());
                builder.include(desLatLng);
            }else {
                continue;
            }

            Log.i("ReadableMap",TYPE);
            int ID=0;
            String imgURL="";
            if(TYPE.equals("alarm")){
                ID = map.getInt("alarm_id");
                imgURL=map.getString("status_icon");
            }else {
                ID = map.getInt("device_id");
                imgURL=map.getString("device_icon");
            }
            MarkerOptions markerOptions = new MarkerOptions();
            markerOptions.position(desLatLng);
            markerOptions.title(String.valueOf(ID));
            markerOptions.visible(true);
            markerOptions.draggable(false);
            Glide.with(getContext()).asBitmap().load(imgURL).diskCacheStrategy(DiskCacheStrategy.ALL).into(new CustomTarget() {

                @Override
                public void onResourceReady(@NonNull Object resource, @Nullable Transition transition) {
                    BitmapDescriptor bitmapDescriptor = BitmapDescriptorFactory.fromBitmap((Bitmap)resource);
                   //添加覆盖物
                    markerOptions.icon(bitmapDescriptor);
                   AMAP.addMarker(markerOptions);
                }
                @Override
                public void onLoadCleared(@Nullable Drawable placeholder) { }
            });
      }

        bounds = builder.build();
        if (bounds!=null) {
            AMAP.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 40));
        }

    }
     @Override
    protected Parcelable onSaveInstanceState() {
        if (CONTEXT.getCurrentActivity().getIntent() != null && CONTEXT.getCurrentActivity().getIntent().getExtras() != null) {
            MAPVIEW.onSaveInstanceState(CONTEXT.getCurrentActivity().getIntent().getExtras());
        }
        return super.onSaveInstanceState();
    }

    @Override
    protected void onDetachedFromWindow() {
        this.removeView(MAPVIEW);
        MAPVIEW.onDestroy();
        super.onDetachedFromWindow();
    }

    /**
     * 对应onResume、对应onPause
     *
     * @param hasWindowFocus
     */
    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {

        super.onWindowFocusChanged(hasWindowFocus);

        if (hasWindowFocus) {
//            对应onResume
            MAPVIEW.onResume();
        } else {
            //对应onPause
            MAPVIEW.onPause();
      }
    }


    public static double convertToDouble(String number, double defaultValue) {
        if (TextUtils.isEmpty(number)) {
          return defaultValue;
       }

        try {
          return Double.parseDouble(number);
       } catch (Exception e) {
          return defaultValue;
      }
    }
 }

四、ReactNative整合

import React, { Component } from 'react';
import { requireNativeComponent} from 'react-native';
import PropTypes from 'prop-types';
var YFRNMapView = requireNativeComponent('YFRNMapView', MapView);
 
export default class MapView extends Component {
   
  render() {
    return (
      <YFRNMapView {...this.props} />
    );
  }
}
  
MapView.propTypes = {
      type:PropTypes.string,
    deviceArray:PropTypes.array,
    onClick:PropTypes.func
};
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 160,165评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,720评论 1赞 298
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,849评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,245评论 0赞 213
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,596评论 3赞 288
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,747评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,977评论 2赞 315
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,708评论 0赞 204
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,448评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2赞 249
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1赞 261
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,493评论 3赞 258
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,153评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0赞 198
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2赞 277
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2赞 272