ReactNativeでiosのネイティブモジュールを作る

以下の記事の翻訳です。

https://teabreak.e-spres-oh.com/swift-in-react-native-the-ultimate-guide-part-1-modules-9bb8d054db03

## 新しいreact nativeプロジェクトの作成

react-native init CounterApp
cd CounterApp
react-native run-ios

次に
ios/CounterApp.xcodeproj
をxcodeで開いてください。

## Swift ファイルの作成
xcodeでcmd+Nを押して新しいファイルを作ります。
Counterというクラス名でSwiftファイルを作成します。

Swiftファイルを作成した後、Objective-C Bridging Headerを作るか聞かれるので、作成してください。

ファイル名は<プロジェクト名>-Bridging-Header.hですが、絶対に名前を変更しないでください。
xcodeのBuildSettingsでこの名前を利用しています。
プロジェクトにつき、Objective-C Bridging Headerは一つだけです。

Objective-C Bridging Headerに必要なライブラリをインポートします。

// CounterApp-Bridging-Header.h
#import "React/RCTBridgeModule.h"

## Swiftクラスの作成
Counterという空のクラスを作成します。このクラスはNSObjectを継承している必要があります。
そのためobject-cへエクスポーズ出来ます。

// Counter.swift
import Foundation
@objc(Counter)
class Counter: NSObject {
}

## どうやってSwiftのクラスをJSにエクスポーズするのか?
object-cのマクロであるRCT_EXTERN_MODULEを使用します。

xcodeからcmd+nで新しいファイル作成プロンプトを開き、object-cファイルをを選択して、Counterというファイルを作成します。

// Counter.m
#import "React/RCTBridgeModule.h"
@interface RCT_EXTERN_MODULE(Counter, NSObject)
@end

RCTBridgeModuleをインポートする必要があります。
これでjs側でswiftのCounterクラスを使用出来る様になりました。

RCT_EXTERN_MODULEの最初の引数はSwiftのクラス、二番目の引数はスーパークラスです。

## js側からnativeModuleへアクセスする。
App.jsでnativeModulesを呼び出してみます。

// App.js
import { NativeModules } from 'react-native'
console.log(NativeModules.Counter)
// or NativeModules.RNCounter, if you have renamed it

コンソールに表示されれば完成です。

続く。

続きは翻訳元を読んでください。
https://teabreak.e-spres-oh.com/swift-in-react-native-the-ultimate-guide-part-1-modules-9bb8d054db03