簡單實現RN調用原生方法（IOS）

在React Native中，一個“原生模塊”就是一個實現了“RCTBridgeModule”協議的Objective-C類（個人理解RCTBridgeModule就是react與native之間的橋）,下面我們來創建一只貓（cat）

我們現在iOS根目錄下創建一個.h頭文件（CreatCat.h） 繼承橋梁RCTBridgeModule

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface CreatCat : NSObject <RCTBridgeModule>

@end

 

2 然后我們創建.m文件(CreatCat.m)來實現這個類的一些方法

//
//  CreatCat.m
//  demo
//
//  Created by xieyusheng on 2017/11/10.
//  Copyright © 2017年 Facebook. All rights reserved.
//

#import <Foundation/Foundation.h>
#import "CreatCat.h"

@implementation CreatCat

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(cratCat:(NSString *)name sex:(NSString *)sex age:(int)age)
{
  NSLog(@"我創建了一只名叫%@的貓，性別%@， 今年%d歲", name, sex, age);
}

//對外提供調用方法
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
  NSLog(@"Pretending to create an event %@ at %@", name, location);
}

//方法3
RCT_EXPORT_METHOD(whoName:(NSString *)name age:(int)age location:(NSString *)location){
  NSLog(@"可以的%@,年來%d,還有%@",name,age,location);
}

@end

 這里注意的是   RCT_EXPORT_MODULE(); 就是導出模塊的意思 一般默認模塊名稱i就是類名 

然后我們在實現方法  addEvent等等

 

然后在我們就可以在RN的js里面實現了

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Touchableopacity
} from 'react-native';
//導入
var cat = require('react-native').NativeModules.CreatCat;
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
//方法執行，
  show(){
    // alert("aa")
    // cat.cratCat('機器貓', '男', 2);
    // cat.addEvent("血雨聲","zaijia")
    cat.whoName("xieyusheng",12,"官渡")
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={()=>this.show()}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

 然后在Xcode的控制台上就可以看到打印的結果了,

當然 這只是第一步 作為js端需要原生傳遞過來數據 那么久需要回調了 ，這里才用的是Promise格式

RCT_REMAP_METHOD(findEventsPromise,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  NSArray *events =@[@"張三",@"李四",@"王五",@"趙六"];
  if (events) {
    resolve(events);
  } else {
    NSError *error=[NSError errorWithDomain:@"我是Promise回調錯誤信息..." code:101 userInfo:nil];
    reject(@"no_events", @"There were no events", error);
  }
}

 js端

//獲取Promise對象處理
  ok(){
    cat.findEventsPromise()
      .then((responseJson) => {
        alert(responseJson)
      })
      .catch((error) => {
        console.error(error);
      });
  }

 會彈出原生傳遞過來的數據了哦。

 

以上我們就可以實現RN端和IOS原生端的數據之間的相互傳遞！