React-Native之IOS本地模块的应用实践分享（仅此一篇足以...）

前言

React-Native从诞生至今，火热程度已经不言而喻，在不断的框架迭代过程中，RN也提供了丰富的组件，以供开发者使用，但是在实际应用中，我们可能需要更为丰富的交互组件，但是RN中又没有及时提供，这时候我们就需要使用RN的本地模块，本地模块即可以使用JS调用Native，也可以使用Native调用JS, 并传递各种参数，实现完整功能，接下来我们看看具体的使用方法，方便大家参考学习，如果想了解更多，我们可以查阅官方的文档。

下面文章中，我会经常用到RN，即为React Native的缩写，请见谅。

类库及模块组件

1.RCTBridgeModule

  • RCTBridgeModule

在React Native中，如果实现一个原生模块，需要实现RCTBridgeModule”协议，其中RCT就是ReaCT的缩写。

  • RCT_EXPORT_MODULE()

如果我们实现了RCTBridgeModule协议，我们的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

  • RCT_EXPORT_METHOD()

与此同时我们需要声明RCT_EXPORT_METHOD()宏来实现要给Javascript导出的方法，否则React Native不会导出任何方法。

  • RCT_REMAP_METHOD()

React Native还定义了一个RCT_REMAP_METHOD()宏，它可以指定Javascript方法名， 当许多方法的第一部分相同的时候用它来避免在Javascript端的名字冲突。

2.NativeModules

在Javascript中如果想调用Native的方法，需要使用RN提供的NativeModules模块，具体代码实例中会给出。

3.NativeAppEventEmitter

这是一个事件监听处理的方法，应用在JS中，可以监听到native调用的事件以及参数。

起步（Hello World…）

现在开始我们简单来写一个例子，就是利用JS调用Native方法，并打印Hello World。

创建native文件（OC）

HelloWorld.h

#import <React/RCTBridgeModule.h>

@interface HelloWorld : NSObject<RCTBridgeModule>

@end

这里主要实现一个协议RCTBridgeModule, IOS中的协议和Java中的接口概念非常相似。这个协议由RN提供。在RN 0.40版本以后，引入方式发生了改变

#import "HelloWorld.h"

@implementation HelloWorld
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(sayHello:(NSString *) msg)
{
  NSLog(@"打印Hello World%@",msg);
}
@end

.m文件中实现了两个宏，用于声明javascript调用的方法。RCT_EXPORT_MODULE()这个文件中，我们可以不指定名字，会默认使用class名字。

JS文件：

import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
        Button,
        NativeModules
} from ‘react-native‘;

export default class NativeModuleDemo extends Component {
        onPress(){
                let HelloWorld = NativeModules.HelloWorld;
                HelloWorld.sayHello(‘Hello World你好‘);
        }
    render() {
            return (
          <View style={{marginTop:40}}>
            <Button onPress={this.onPress.bind(this)} title="Say Hello" />
          </View>
            );
    }
}

AppRegistry.registerComponent(‘NativeModuleDemo‘, () => NativeModuleDemo);

此文件是JS文件，首先要引入NativeModules模块，用于调用native方法。

核心代码主要是下面部分，获取native模块，然后调用sayHello方法，传递参数。

let HelloWorld = NativeModules.HelloWorld;
HelloWorld.sayHello(‘Hello World你好‘);

特殊参数的传递

上面的例子中我们传递了一个简单的string类型，但是实际应用中会有多种复杂的类型，比如枚举，比如日期时间类型等等，为此我们看看RN Bridge给我们提供了哪些类型参数：

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) 包含本列表中任意类型
  • object (NSDictionary) 包含string类型的键和本列表中任意类型的值
  • function (RCTResponseSenderBlock)

奇怪，没有时间和枚举类型，那该怎么办？

还好，在RN中提供了一个RCTConvert库，帮助我们进行类型转换，具体来看看代码：

创建MyDate.h

#import <React/RCTBridgeModule.h>
#import <React/RCTConvert.h>
@interface MyDate : NSObject<RCTBridgeModule>

@end

这里主要引用了RCTConvert类库，进行转换。

实现MyDate.m

#import "MyDate.h"
@implementation MyDate
RCT_EXPORT_MODULE();
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2)
{
  NSDate* dt1 = [RCTConvert NSDate:d1];
  NSDate* dt2 = [RCTConvert NSDate:d2];
  NSComparisonResult result = [dt1 compare:dt2];
  switch(result){
    case NSOrderedAscending:
    {
       NSLog(@"比较结果%@",@"开始时间小于结束时间");
    }
    case NSOrderedDescending:
    {
      NSLog(@"比较结果%@",@"开始时间大于结束时间");
    }
  }

}
@end

JS文件实现：


import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
        Button,
    DatePickerIOS,
        NativeModules
} from ‘react-native‘;

export default class NativeModuleDemo extends Component {
    constructor(){
      super();
      this.state = {startDate: new Date(), endDate: new Date()};
    }
        onPress(){
                let HelloWorld = NativeModules.HelloWorld;
                HelloWorld.sayHello(‘Hello World你好‘);
        }
        onPressDateValidation() {
          var myDate = NativeModules.MyDate;
          myDate.printDate(this.state.startDate.getTime(), this.state.endDate.getTime());
    }
        onStartDateChange(date) {
          this.setState({startDate: date});
    }
        onEndDateChange(date) {
          this.setState({endDate: date});
    }
    render() {
            return (
          <View style={{marginTop:40}}>
            <DatePickerIOS
              date={this.state.startDate}
              mode=‘date‘
              onDateChange={this.onStartDateChange.bind(this)} />
            <DatePickerIOS
              date={this.state.endDate}
              mode=‘date‘
              onDateChange={this.onEndDateChange.bind(this)} />
            <Button onPress={this.onPressDateValidation.bind(this)} title="Say Hello" />

          </View>
            );
    }
}

AppRegistry.registerComponent(‘NativeModuleDemo‘, () => NativeModuleDemo);

这里RCTConvert可以转换很多类型，比如字典类型：

NSString* str = [RCTConvert NSString:details[@"key"]];

回调函数的使用

套用上边的例子，我们只需要更改.m实现文件即可：

#import "MyDate.h"
@implementation MyDate
RCT_EXPORT_MODULE();
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2  event:(RCTResponseSenderBlock)callback)
{
  NSDate* dt1 = [RCTConvert NSDate:d1];
  NSDate* dt2 = [RCTConvert NSDate:d2];
  NSComparisonResult result = [dt1 compare:dt2];
  switch(result){
    case NSOrderedAscending:
    {
       NSLog(@"比较结果%@",@"开始时间小于结束时间");
    }
    case NSOrderedDescending:
    {
      NSLog(@"比较结果%@",@"开始时间大于结束时间");
    }
  }
  NSArray *events = [NSArray arrayWithObjects:@"测试结果",nil];
  callback(@[[NSNull null], events]);
}
@end

这里主要应用了：

event:(RCTResponseSenderBlock)callback
....
callback(@[[NSNull null], events]);

callback返回的是一个数组，这里要切记，第一个为错误信息。

JS实现：

onPressDateValidation() {
          var myDate = NativeModules.MyDate;
          myDate.printDate(this.state.startDate.getTime(), this.state.endDate.getTime(), (err, result) => {
            alert(result);
      });
    }

效果：

Promises回调处理

原生模块还可以使用promise来简化代码，搭配ES2016(ES7)标准的async/await语法则效果会更好理解，而且更为简单。

主要原理为最后两个参数是RCTPromiseResolveBlock和RCTPromiseRejectBlock，则对应的JS方法就会返回一个Promise对象。

我们把上面的代码用promise来代替回调进行重构：

套上上边代码，我们更改MyDate.m文件：

#import "MyDate.h"
@implementation MyDate
RCT_EXPORT_MODULE();
RCT_REMAP_METHOD(printDate, date1:(nonnull NSNumber *)d1 date2:(nonnull NSNumber *)d2  resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  NSDate* dt1 = [RCTConvert NSDate:d1];
  NSDate* dt2 = [RCTConvert NSDate:d2];
  NSComparisonResult result = [dt1 compare:dt2];
  switch(result){
    case NSOrderedAscending:
    {
       NSLog(@"比较结果%@",@"开始时间小于结束时间");
    }
    case NSOrderedDescending:
    {
      NSLog(@"比较结果%@",@"开始时间大于结束时间");
    }
  }
  NSArray *events = [NSArray arrayWithObjects:@"测试结果",nil];
  if (events) {
    resolve(events);
  } else {
    reject(@"",@"",nil);
  }
}
@end

JS文件更改：

async onPressDateValidation() {
          var myDate = NativeModules.MyDate;
          var result = await myDate.printDate(this.state.startDate.getTime(), this.state.endDate.getTime());
          alert(result);
    }

Native单向调用JS方法

新建MyCallBack.h MyCallBack.m文件, 这里引入RCTEventDispatcher 类库用于处理事件回调。

MyCallBack.m

#import "MyCallBack.h"
#import <React/RCTEventDispatcher.h>

@implementation MyCallBack

RCT_EXPORT_MODULE();
@synthesize bridge = _bridge;
RCT_REMAP_METHOD(checkCallBack, str:(NSString *)str)
{
  [self.bridge.eventDispatcher sendAppEventWithName:@"EventCallBack" body:@{@"name": @"sad"}];
}
@end

首先需要用到synthesize方法，同步一个参数变量_bridge，主要代码如下：

 [self.bridge.eventDispatcher sendAppEventWithName:@"EventCallBack" body:@{@"name": @"sad"}];

sendAppEventWithName必须和JS中保持一致。

JS中注册监听事件：

 this.state = {startDate: new Date(), endDate: new Date()};
            var subscription = NativeAppEventEmitter.addListener(
                ‘EventCallBack‘,
                (reminder) => alert(reminder.name)
            );

这里我们需要从RN中引入NativeAppEventEmitter， 用于创建监听事件。

千万不要忘记忘记取消订阅, 通常在componentWillUnmount函数中实现。

常量枚举类型的导出事件

在Naive开发中我们应用到了丰富的变量类型，那么RN中如何能应用到Native的部分数据类型呢？比如枚举，常量？

1.常量

原生模块可以导出一些常量，这些常量在JavaScript端随时都可以访问。

用这种方法来传递一些静态数据，可以避免通过bridge进行一次来回交互。

- (NSDictionary *)constantsToExport
{
  return @{ @"firstDayOfTheWeek": @"Monday" };
}

上面constantsToExport为复写的方法，名字不可更改，否则无法调用。

JS使用：

console.log(MyDate.firstDayOfTheWeek);

2.枚举：

用NS_ENUM定义的枚举类型。

#import "EnumConstants.h"

typedef NS_ENUM(NSInteger, UIStatusBarAnimation) {
  UIStatusBarAnimationNone,
  UIStatusBarAnimationFade,
  UIStatusBarAnimationSlide,
};

@implementation EnumConstants

RCT_EXPORT_MODULE();

- (NSDictionary *)constantsToExport
{
  return @{ @"statusBarAnimationNone" : @(UIStatusBarAnimationNone),
            @"statusBarAnimationFade" : @(UIStatusBarAnimationFade),
            @"statusBarAnimationSlide" : @(UIStatusBarAnimationSlide) };
};

@end

JS使用：

onPressForEnum() {
        let enumConstants = NativeModules.EnumConstants;
        alert(enumConstants.statusBarAnimationFade);
}

线程的应用

首先我们创建一个MyThread 类， 复写methodQueue方法， 如果返回dispatch_get_main_queue，即为调用主线程。

#import "MyThread.h"

@implementation MyThread
RCT_EXPORT_MODULE()
- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}

RCT_REMAP_METHOD(doInThread, date1:(nonnull NSNumber *)d1 callback:(RCTResponseSenderBlock)callback)
{
  ...
}
@end

类似的，如果一个操作需要花费很长时间，原生模块不应该阻塞住，而是应当声明一个用于执行操作的独立队列。

- (dispatch_queue_t)methodQueue
{
  return dispatch_queue_create("com.facebook.React.AsyncLocalStorageQueue", DISPATCH_QUEUE_SERIAL);
}

如果你的方法中“只有一个”是耗时较长的（或者是由于某种原因必须在不同的队列中运行的），你可以在函数体内用dispatch_async方法来在另一个队列执行，而不影响其他方法：

RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSenderBlock)callback)
{
  dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    // 在这里执行长时间的操作
    ...
    // 你可以在任何线程/队列中执行回调函数
    callback(@[...]);
  });
}

上面代码示例，参考官方文档！更多信息大家可以自行查阅！

总结

总体来讲，RN的提供给开发者的桥接口比较完善，方便了调用，在实际项目中应用也比较流畅。

时代的高歌在唱响，科技的浪潮在迈进，移动的时代在变革，不论未来如何，作为RN的追随者， 希望今后能提供更为完善的接口组件。

接下来，就到你了，试试吧！

时间： 2024-11-03 21:24:33

React-Native之IOS本地模块的应用实践分享（仅此一篇足以...）的相关文章

React Native的iOS开发步骤以及崩溃收集

React Native的iOS开发以及崩溃收集 简介 React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP. React Native着力于提高多平台开发的开发效率 -- 仅需学习一次,编写任何平台.(Learn once, write anywhere) Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native. 准备 安装 iOS只能MAC下开发,需要Xcode; An

React Native移植iOS原生项目

手工集成React Native 第一步:初始化React Native环境 在我们要集成的项目中,进入到*.xcodeproj文件的上级目录,运行React Native初始化命令react-native init [Project Name]会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程.init过程会需要一点时间,耐心等待. 完成后项目文件目录会变成这样: node_modules:react native依赖包 ios:iOS项目相关代码,Xcode工程文件 an

React Native 与iOS的通信

RN可以很好的与原生进行交互,我们首先看看效果吧: 首先我们来看看React Native 怎样调用iOS的代码并且带有简单的参数: 在iOS工程里面我们新建一个类iOSExport,iOSExport将会实现RCTBridgeModule协议. 首先我们要在iOSExport类的实现中添加这句宏定义:RCT_EXPORT_MODULE() RCT_EXPORT_MODULE()如果你不传入参数,那么你在iOS中导出的模块名就是类名,你也可以插入参数作为自定义模块名. @implementati

react native 使用 iOS 原生 UI 组件

目前 react native 的组件还是不多,有些也并不怎么好用,这时候就需要封装原生 UI 组件了 之前写过RN 与 native 的通信 无非就是两种: 1>>>  react native 内部事件需要通知 native 调用 native 的方法(或者传递RN 中的数据到 native),这时候可以用新建一个 manager 之类的文件 RCT_EXPORT_MOUDLE() 暴露 native类  ,RCT_EXPORT_METHOD () 暴露 native 方法给 js

react native 开发IOS

转载自kaich blog(http://www.kaich.xyz) 接触 react native 对于技术,我比较喜欢追新.看到报道大名鼎鼎的facebook(开源界的模范,发布了很多高质量的开源框架)开源了移动端跨平台的新框架react native,于是就迫不及待的开始接触它了.react native的目的是为了让前端开发任务能开发移动端(ios程序员相对于web端来说要少得多),于是就有了这样的框架.对于我们IOS程序员有没有必要去学它,看到它另外一个特性:跨平台,而且又一定程度的

[React Native] Basic iOS Routing -- NavigatorIOS

Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends Component { render() { return ( <NavigatorIOS style={styles.container} initialRoute={{ title: 'Github note taker', component: Main }} /> ); } } This

React—Native开发之原生模块向JavaScript发送事件

首先,由RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之 间通信,主要有三种方法: (1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript. (2)使用Promise来实现. (3)原生模块向JavaScript发送事件. 其中,在我的博客React-Native开发之原生模块封装(Android)升级版 较为详细的阐述了如何使用回调函数Callback 来将数据传向JavaScript 端. 但是有一个比较难以解决的问题是: cal

[React Native混合开发]React Native for iOS之创建第一个案例

一 摘要 上一篇文章,介绍了如何在MAC电脑上搭建React Native运行环境,环境搭建好了,接下来这篇给大家介绍一下如何创建自己的工程项目. 二 具体步骤 第一步 创建HelloWord工程 第三步 运行工程 1.目录结构 2.打开ios目录运行工程文件 这样就打开了工程了 3.Command+R运行工程 第四步 代码编辑 现在大家最关心的在哪里写代码,下面就给大家介绍在哪个位置进行代码的编写. 现在我们以混编iOS为例,打开index.ios.js 我们在这个文件进行代码的编写.如果是混

基于React Native的跨三端应用架构实践

作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能节省大量人力物力. React Native 的推出,为跨平台的开发带来了新的曙光. 虽然 Facebook 官方 blog 的说法 React Native 支持“Learn once, write anywhere.”. 但经过开源社区的不断努力,React Native 已经可以达到“一次编写