[React Native] Native Module 연동(구현)하기 (2) - iOS

이어서 iOS도 모듈화해보자.

(이전 포스팅 : Android 모듈화 과정 https://cotist.tistory.com/27 )

 

 

아래 경로로 Module의 헤더파일을 생성해주고 코드를 작성.

//  RCTIOSTestModule.h

#import <React/RCTBridgeModule.h>
@interface RCTIOSTestModule : NSObject <RCTBridgeModule>
@end

 

 

 

앞서 만든 헤더파일의 같은 경로에 본체인 메인 파일을 생성하자.

내보낼 함수들을 작성하고 모듈을 export하자 (주석 참조)

//
//  RCTIOSTestModule.m
//  ReactNativeNativeModuleSample
//
//  Created by user on 2023/02/15.
//
#import "RCTIOSTestModule.h"
#import <React/RCTLog.h>

@implementation RCTIOSTestModule

// IOSTestModule 로 export 시킴
RCT_EXPORT_MODULE(IOSTestModule);

// createNativeEvent 함수 선언
RCT_EXPORT_METHOD(createNativeEvent:(NSString *)name location:(NSString *)location)
{
  RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

// getDeviceName으로 함수 선언
RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getDeviceName)
{
return [[UIDevice currentDevice] name];
}

@end

 

 

이제 RN단에 네이티브 모듈을 꺼내서 확인해보자.

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  View,
  NativeModules,
  Button,
  Text,
} from 'react-native';

import {Header} from 'react-native/Libraries/NewAppScreen';

function IosContainer() {
  const {IOSTestModule} = NativeModules;

  const onHandleNativeEvent = () => {
    IOSTestModule.createNativeEvent(
      '네이티브에서 생성한 함수입니다.',
      'console은 xcode에서 찍힙니다.',
    );
  };

  // return을 네이티브에서 선언하였지만 RN단에도 return 값을 받을 수 있다.
  const onHandlePropsValue = () => {
    console.log(IOSTestModule.getDeviceName());
  };

  return (
    <SafeAreaView>
      <StatusBar />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <Header />
        <View>
          <Text style={{textAlign: 'center'}}>iOS Native Modules Test</Text>
          <Button title="Call In Native Code" onPress={onHandleNativeEvent} />
          <Button
            title="Call In React Native Code"
            onPress={onHandlePropsValue}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

export default IosContainer;

 

 

(아래는 전체 구현 코드 github 주소입니다. 도움 되셨으면 좋겠습니다!)

https://github.com/bluetg2001/RN_NativeModule_SampleApp