[RN101]如何在react-native中加入ios原生模組

前言:

因為最近遇到了一個需求,是網路上套件沒有辦法解決的,所以最後決定手動自幹一個ios模組,以下是研究出來的方法,如果有更好的解決方式還請麻煩多多指導。

1、初始化專案

react-native init NativelibTest

初始化成功之後我們可以在專案底下的ios資料夾中找到NativelibTest.xcodeproj,如下圖:

2.使用xcode打開,點選左下角,選擇File來新增檔案,如下圖:

3.選擇Cocoa Touch Class,如下圖:

4.輸入模組名稱,選擇語言,這邊使用Objective-c 為例

5.選擇儲存位置,這邊是放在專案底下的ios資料夾:

6.編輯要加入的原生模組標頭檔testVer2.h,在裡面加入:

//testVer2.h
#import <React/RCTBridgeModule.h> //引入React的bridge,讓React-native可以跟我們的原生模組溝通,RCT是ReaCT縮寫。
@interface testVer2 : NSObject<RCTBridgeModule>@end

7.編輯要加入的原生模組.m檔,在裡面加入:

#import "testVer2.h"         //引入剛剛定義好的標頭檔#import <React/RCTLog.h>    //React 的log功能,有點像console.log()@implementation testVer2    //實作RCTBridgeModuleRCT_EXPORT_MODULE();//匯出我們的原生模組//以下是我們要匯出的原生模組功能,參考至官網教學://http://facebook.github.io/react-native/docs/native-modules-ios.htmlRCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){RCTLogInfo(@"Pretending to create an event %@ at %@",name,location);}@end

8.在專案中引入Native Modules API

9.定義原生模組

var testVer2 = NativeModules.testVer2;

10.呼叫addEvent函式

testVer2.addEvent("Birthday Party", "4 Privet Drive, Surrey");
//Birthday Party是RCTLogInfo中的name
//4 Privet Drive, Surrey是RCTLogInfo中的location

11.編譯專案,完成!

參考資料:http://facebook.github.io/react-native/docs/native-modules-ios.html

--

--

打雜型工程師,平常靠前端維生,利用side project滿足想當全端工程師的想像,偶爾發發文章練一下文筆

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Chen

Alex Chen

打雜型工程師,平常靠前端維生,利用side project滿足想當全端工程師的想像,偶爾發發文章練一下文筆