きるこの日記帳

//
//  NativeModuleYobidashi.h
//  ReactNativeHaTsurai
//
//  Created by grgr-dkrk on 2021/01/01.
//

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface NativeModuleYobidashi : NSObject<RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

#import <Foundation/Foundation.h>
#import <React/RCTBridge.h> // ①:ここを追加。

// ②:NSObjectのプロトコルに RCTBridgeModule を指定
@interface NativeModuleYobidashi : NSObject<RCTBridgeModule>

@end

// その1
@interface FOOPerson : NSObject {
    NSString *name;
}
-(void) setName:(NSString *) personName;
-(NSString *) getName;
@end

// その2
@interface HOGPerson : NSObject
@property (nonatomic, copy) NSString *name; // こういう書き方もある
-(void) setName:(NSString *) personName;
-(NSString *) getName;
@end

//
//  NativeModuleYobidashi.m
//  ReactNativeHaTsurai
//
//  Created by grgr-dkrk on 2021/01/01.
//

#import "NativeModuleYobidashi.h"

@implementation NativeModuleYobidashi

RCT_EXPORT_MODULE(); // ①

// ②
RCT_EXPORT_METHOD(sum:(double)num1 num2:(double)num2 callback:(RCTResponseSenderBlock)callback) {
  double result = num1 + num2;
  callback(@[@(result)]);
}

// ②
RCT_EXPORT_METHOD(getStringLength:(NSString *)str resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  resolve(@[@([str length])]);
}

@end

RCT_EXPORT_MODULE(); // ①

  RCT_EXTERN void RCTRegisterModule(Class);
  +(NSString *)moduleName                  
  {                                        
    return @ #js_name;                     
  }                                        
  +(void)load                              
  {                                        
    RCTRegisterModule(self);               
  }

/**
 * Register the given class as a bridge module. All modules must be registered
 * prior to the first bridge initialization.
 */
void RCTRegisterModule(Class);
void RCTRegisterModule(Class moduleClass)
{
  RCTWarnNotAllowedForNewArchitecture(
      @"RCTRegisterModule()", [NSString stringWithFormat:@"'%@' was registered unexpectedly", moduleClass]);

  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    RCTModuleClasses = [NSMutableArray new];
    RCTModuleClassesSyncQueue =
        dispatch_queue_create("com.facebook.react.ModuleClassesSyncQueue", DISPATCH_QUEUE_CONCURRENT);
  });

  RCTAssert(
      [moduleClass conformsToProtocol:@protocol(RCTBridgeModule)],
      @"%@ does not conform to the RCTBridgeModule protocol",
      moduleClass);

  // Register module
  dispatch_barrier_async(RCTModuleClassesSyncQueue, ^{
    [RCTModuleClasses addObject:moduleClass];
  });
}

/**
 * Register the given class as a bridge module. All modules must be registered
 * prior to the first bridge initialization.
 */
void RCTRegisterModule(Class);
void RCTRegisterModule(Class moduleClass)
{
  RCTWarnNotAllowedForNewArchitecture(
      @"RCTRegisterModule()", [NSString stringWithFormat:@"'%@' was registered unexpectedly", moduleClass]);
      
  // dispatch_once はインスタンス生成時に一回だけ発火する
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    RCTModuleClasses = [NSMutableArray new]; // 配列生成
    RCTModuleClassesSyncQueue =
       // ディスパッチキューというのを作成。並列キュー
       dispatch_queue_create("com.facebook.react.ModuleClassesSyncQueue", DISPATCH_QUEUE_CONCURRENT); 
  });

  RCTAssert(
      [moduleClass conformsToProtocol:@protocol(RCTBridgeModule)],
      @"%@ does not conform to the RCTBridgeModule protocol",
      moduleClass);

  // Register module
  // 先程の並列キューに処理を送信。　dispatch_barrier_async によって、前に実行されているタスクの完了を待つ。
  dispatch_barrier_async(RCTModuleClassesSyncQueue, ^{
     // 中でやっていることは、RCTModuleClasses にクラスを追加しているだけ  
    [RCTModuleClasses addObject:moduleClass]; // 配列じゃないよ
  });
}

// ②足し算
RCT_EXPORT_METHOD(sum:(double)num1 num2:(double)num2 callback:(RCTResponseSenderBlock)callback) {
  double result = num1 + num2;
  callback(@[@(result)]);
}

// ②文字数カウント
RCT_EXPORT_METHOD(getStringLength:(NSString *)str resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  resolve(@[@([str length])]);
}

RCT_EXPORT_METHOD(関数名:(型、クラス名)関数の第一引数名 ...引数nのラベル:(型、クラス名)関数の第n引数名) {
  // 処理を書く
}

RCT_EXPORT_METHOD(sum:(double)num1 num2:(double)num2 callback:(RCTResponseSenderBlock)callback)

RCT_EXPORT_METHOD(sum:(double)num1 num2:(double)num2 callback:(RCTResponseSenderBlock)callback) {
  double result = num1 + num2;
  callback(@[@(result)]);　// result の結果が取れる
}

// NativeModuleYobidashi.sum(2, 3, (result) => {console.log(result) })

RCT_EXPORT_METHOD(getStringLength:(NSString *)str resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  resolve(@[@([str length])]) // resolve で文字列の長さを返す;
}

// const strLength = await NativeModuleYobidashi.getStringLength('foo')

#import <React/RCTBridgeModule.h>

import Foundation

@objc(NativeModuleYobidashi)
class NativeModuleYobidashi: NSObject {
  
  // 第一引数には _ を入れる
  @objc func sum(_ num1: Double, num2: Double, callback: RCTResponseSenderBlock) -> Void {
    var result: Double = num1 + num2
    callback([result])
  }
  
  @objc func getStringLength(_ str: String, resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) -> Void {
    resolve([str.count])
  }
}

//
//  NativeModuleYobidashi.m
//  ReactNativeHaTsurai
//
//  Created by grgr-dkrk on 2021/01/01.
//

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(NativeModuleYobidashi, NSObject)

RCT_EXTERN_METHOD(sum:(double)num1 num2:(double)num2 callback:(RCTResponseSenderBlock)callback);

RCT_EXTERN_METHOD(getStringLength:(NSString *)str resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject);

@end

package com.yourprojectname; // ここは自分のプロジェクト名

public class NativeModuleYobidashi {
}

package com.yourprojectname; // ここは自分のプロジェクト名
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.Map;
import java.util.HashMap;

public class NativeModuleYobidashi extends ReactContextBaseJavaModule {
   NativeModuleYobidashi(ReactApplicationContext context) {
       super(context);
   }
}

public class NativeModuleYobidashi extends ReactContextBaseJavaModule {
   NativeModuleYobidashi(ReactApplicationContext context) {
       super(context);
   }
}

@NonNull
String getName();

public class NativeModuleYobidashi extends ReactContextBaseJavaModule {
  NativeModuleYobidashi(ReactApplicationContext context) {
    super(context);
  }

  @NotNull
  @Override
  public String getName() {
    return "NativeModuleYobidashi";
  }
}

public class NativeModuleYobidashi extends ReactContextBaseJavaModule {
  NativeModuleYobidashi(ReactApplicationContext context) {
    super(context);
  }

  @NotNull
  @Override
  public String getName() {
    return "NativeModuleYobidashi";
  }
  
  // sum を追加、コールバック式で返す
  @ReactMethod
  public void sum(double num1, double num2, Callback callback) {
    double result = num1 + num2;
    callback.invoke(result); // callback.invoke で result を渡す
  }

  // getStringLength を追加、Promise 式で返す
  @ReactMethod
  public void getStringLength(String str, Promise promise) {
    promise.resolve(str.length()); // これは説明不要
  }
}

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage()); ← ここのコメントを外す
  return packages;
}

package com.yourpackgename; // ここは自分のプロジェクト名
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyReactNativePackage implements ReactPackage {

   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
       return Collections.emptyList();
   }

   @Override
   public List<NativeModule> createNativeModules(
           ReactApplicationContext reactContext) {
       List<NativeModule> modules = new ArrayList<>();
       
       // モジュールリストに NativeModuleYobidashi を登録する
       modules.add(new NativeModuleYobidashi(reactContext));

       return modules;
   }

}

import { NativeModules } from 'react-native'

const App = () => {
  const [ans, setAns] = useState(0)
  NativeModules.NativeModuleYobidashi.sum(2, 3, (result) => {
    setAns(result)
  })
  // ...
}

import { NativeModules } from 'react-native'
const { NativeModuleYobidashi } = NativeModules

type NativeModuleYobidashiType = {
  sum: (num1: number, num2: number, callback: (result: number) => void) => void
  getStringLength: (str: string) => Promise<number>
}

export default NativeModuleYobidashi as NativeModuleYobidashiType

import React, { useEffect, useState } from 'react'
import { StyleSheet, View, Text } from 'react-native'
import NativeModuleYobidashi from './native-module-yobidashi'

const App = () => {
  const [ans, setAns] = useState(0)
  const [strLength, setStrLength] = useState(0)
  NativeModuleYobidashi.sum(2, 3, (result) => {
    setAns(result)
  })
  useEffect(() => {
    const fn = async () => {
      const _strLength = await NativeModuleYobidashi.getStringLength('foo')
      setStrLength(_strLength)
    }
    fn()
  }, [])

  return (
    <View style={styles.wrapper}>
      <Text style={styles.ans}>2 + 3 = {ans}</Text>
      <Text style={styles.ans}>"foo".length = {strLength}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  wrapper: { marginTop: 60 },
  ans: { fontSize: 56 },
})

export default App