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你好'<