开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

React Native填坑之旅 -- 使用iOS原生视图(高德地图)

简介:
+关注继续查看

在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的。有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的。React Native提供了一套完善的机制,你可以非常简单的用来包装已有的原生视图。

代码地址:https://github.com/future-challenger/react-native-gaode-map

下面就用高德地图作为例子讲解如何包装原生视图。高德地图本身不仅有视图需要展示,还有一些和React Native交互的部分。比如给Js代码发送事件,接受Js发送的方法调用等。

简单实现

基本山只需要三步就可以达到目的:

  1. 创建RCTViewManager的子类
  2. 在源文件里添加RCT_EXPORT_MODULE()宏的调用
  3. 实现- (UIView *)view方法

看看代码:

//.h
#import <Foundation/Foundation.h>
#import <React/RCTViewManager.h>

@interface GDMapViewManager : RCTViewManager

@end

//.m
#import "GDMapViewManager.h"
#import "GDMapView.h"
#import <MAMapKit/MAMapKit.h>
#import <AMapFoundationKit/AMapFoundationKit.h>

@implementation GDMapViewManager

RCT_EXPORT_MODULE()

- (UIView *)view {
  MAMapView *mapView = [[MAMapView alloc] init];
  mapView.showsUserLocation = YES;  // 显示用户位置蓝点
  mapView.userTrackingMode = MAUserTrackingModeFollow;
  
  return mapView;
}

@end

// index.ios.js
// import from `react` & `react native`...

import { requireNativeComponent } from 'react-native'

const GDMapView = requireNativeComponent('GDMapView', null)

export default class mobike extends Component {
  render() {
    return (
      <View style={styles.container}>
        <GDMapView style={{ flex: 1, }} />
      </View>
    );
  }
}

// styles...

属性

要导出属性:

RCT_EXPORT_VIEW_PROPERTY(showsCompass, BOOL)

这里导出的属性是高德地图的内置属性,表示是否在地图上显示指南针。可以如此使用:

<GDMapView style={{ flex: 1, }} showsCompass={true} />

如果是我们自定义的属性,而不是高德地图内置的属性该如何导出呢?来看一个例子:

RCT_CUSTOM_VIEW_PROPERTY(center, CLLocationCoordinate2D, GDMapView) {
  [view setCenterCoordinate:json ? [RCTConvert CLLocationCoordinate2D:json] : defaultView.centerCoordinate];
}

写这个属性是因为出过来的参数是json串,只有最初是的类型NSStringint之类的可用,其他类型的都需要转化。比如这里要用的CLLocationCoordinate2D这个类型。所以我们需要判断js传过来的json是否为空,并在不为空的时候转化成CLLocationCoordinate2D对象。如果js传过来的json为空的话则使用defaultView.centerCoordinate来填充。

处理用户发出的事件

处理直接或者间接的从用户发出的事件。比如,用户对地图的各种操作都会生成对应的事件需要原生代码来处理。

要实现这部分功能基本只需要两步:

  1. 在视图部分添加一个属性:@property (nonatomic, copy) RCTBubblingEventBlock onChange;
  2. 在视图Manager部分暴露出这个属性:RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

之后在相对应的地方调用就可以了,如:

- (void)mapView:(GDMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
  if (!mapView.onChange) {
    return;
  }

  MACoordinateRegion region = mapView.region;
  mapView.onChange(@{
    @"region": @{
      @"latitude": @(region.center.latitude),
      @"longitude": @(region.center.longitude),
      @"latitudeDelta": @(region.span.latitudeDelta),
      @"longitudeDelta": @(region.span.longitudeDelta),
    }
  });
}

建立对应的Js组件

上文的方式使用原生组件会显得凌乱,不易控制。最好的方式就是建立一个对应的Js组件。

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

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

  render() {
    return (
      <GDMapView {...this.props} />
    )
  }
}

MapView.propTypes = {
  marker: React.PropTypes.object,
  markers: React.PropTypes.array,
  zoom: React.PropTypes.number,
  centerCoordinate: React.PropTypes.object,
  showScale: React.PropTypes.bool,
  showsCompass: React.PropTypes.bool,
};

var GDMapView = requireNativeComponent('GDMapView', MapView);

之后就可以这样使用了:

<MapView
    style={{ flex: 1, marginTop: 20, }}
    marker={marker} showsCompass={false}
    markers={markers}
    zoom={10}
    centerCoordinate={{ latitude: 39.909520, longitude: 116.336170 }}
    showScale={false} />

注意,给Js组件定义PropTypes是必须的。而且我这里的定义还是有点模糊。官网的比较细致,列在这里:

MapView.propTypes = {
  region: React.PropTypes.shape({
    /**
     * Coordinates for the center of the map.
     */
    latitude: React.PropTypes.number.isRequired,
    longitude: React.PropTypes.number.isRequired,

    /**
     * Distance between the minimum and the maximum latitude/longitude
     * to be displayed.
     */
    latitudeDelta: React.PropTypes.number.isRequired,
    longitudeDelta: React.PropTypes.number.isRequired,
  }),
};

官网的例子对region这prop定义的相当的细致,不是一个`React.PropTypes.object就过去了的。

还有一些属性,你不想它们作为对应Js组件的API的一部分。所以,需要隐藏起来。那么你可以在绑定原生组件和Js组件的时候指定它们不作为API的一部分。如:

const GDMapView = requireNativeComponent('GDMapView', MapView, {
  nativeOnly: { onChange: true }
});

在对应的组件里处理事件

  1. 在本组件内绑定原生组件的onChange事件,如这里的_onChange()方法。
  2. 在绑定好的方法里(如_onChange()方法内)调用外部传入的事件处理方法(如this.props.onRegionChange

当然,你不会忘了给this.props.onRegionChangePropTypes的。

export default class MapView extends React.Component {
  constructor(props) {
    super(props)

    this._onChange = this._onChange.bind(this);
  }

  _onChange(event) {
    if(!this.props.onRegionChange) {
      return;
    }

    this.props.onRegionChange(event.NativeEvent.region)
  }

  render() {
    return (
      <GDMapView {...this.props} onChange={this._onChange} />
    )
  }
}

MapView.propTypes = {
  //...
  onRegionChange: React.PropTypes.func,
};

const GDMapView = requireNativeComponent('GDMapView', MapView, {
  nativeOnly: { onChange: true }
});

填坑完毕

到这里你可以在React Natie里愉快的使用原生组件了。

后面我们来探讨一下在Android里如何处理这些问题。

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 572064792 | Nodejs:329118122 做人要厚道,转载请注明出处!


















本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/sunshine-anycall/p/6472029.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
React Native之导出
React Native之导出
49 0
React Native之提示Unable to load script from assets ‘index.android.bundle
React Native之提示Unable to load script from assets ‘index.android.bundle
32 0
react native 开发常用优质第三方组件
轻提示 react-native-root-toast git 链接:https://github.com/magicismight/react-native-root-toast 获取设备信息 react-native-device-info git 链接:https://github.
1596 0
《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。
1266 0
《React Native 精解与实战》书籍连载「React Native 底层原理」
此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示,精选了大量实例代码,方便读者快速学习。
1559 0
React Native webView postMessage报错
报错如下: Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined.
2152 0
React Native之hellWord
初始化项目工程 进入自己的工作空间然后shift+鼠标右键打开命令行窗口执行如下命令创建RN工程HelloWorld: 然后使用Android Studio打开AVD Manager创建模拟器,在打开Android Studio的时候会提示创建Android项目,我们的目的只是为了打开模拟器,就随便创建一个项目就行了,创建之后就直接打开模拟器:
1348 0
React Native资料汇总
React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html   REACT NATIVE开发书籍http://www.reactnative.com/books/   整理了一份React-Native学习指南 自己在学习React-Native过程中整理的一份学习指南,包含 教程、开源app和资源网站等,还在不断更新中。
2058 0
4267
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载