関数をC++からReactNativeにエクスポートする方法

今日も、ネイティブモジュールとC++での経験を共有し続けています。

多くのC/C ++ライブラリがモバイルプラットフォーム用に作成されているので、それらをiOSまたはReactNativeアプリケーションに実装する必要があります。そのため、関数をC++からReactNativeにエクスポートする方法についての記事を書きたいと思います。これは、理解しやすく、初心者の時間を節約できます。新しいreactネイティブアプリケーションから始めます

1.新しいreactネイティブアプリを作成し、ターミナルを開いて実行します

npx react-native init NativeModules

2. Xcodeを開き、NativeModules / ios/NativeModule.xcworkspaceに移動します

3.C++側での作業

新しいC++ファイルを作成し、名前を付けますCpp_to_RN.cpp

新しいC++ファイルを作成すると、XcodeはヘッダーファイルCpp_to_RN.hpp を作成します

まず、「Cpp_to_RN.hpp」ファイルを開き、本体のない関数を含むクラスを作成します。

#ifndef Cpp_to_RN_hpp
#define Cpp_to_RN_hpp#include <stdio.h>
#include <string>class Cpp_to_RN {
public:
    std::string sayHello();
};#endif /* Cpp_to_RN_hpp */

次に、ファイルを開いてCpp_to_RN.cpp、単純な関数「sayHello()」を記述します。

#include "Cpp_to_RN.hpp"
std::string Cpp_to_RN::sayHello(){
    return "Hello from CPP";
}

4.C++ファイルのラッピングに取り組んでいます。

C ++ファイルをラップしてIOS（swift）側にエクスポートするには

a。ObjectiveCファイルを作成して名前を付けますCpp_to_RN.m

名前をに変更Cpp_to_RN.m します Cpp_to_RN.mm

b。ファイルを開き、C++ファイルからWrapCpp_to_RN.mm 関数をラップする本文のコンテンツを記述します。sayHello

#import <Foundation/Foundation.h>
#import "WrapCpp_to_RN.h"
#import "Cpp_to_RN.hpp"@implementation WrapCpp_to_RN- (NSString *) sayHello {
  Cpp_to_RN fromCPP;
    std::string helloWorldMessage = fromCPP.sayHello();
    return [NSString
            stringWithCString:helloWorldMessage.c_str()
            encoding:NSUTF8StringEncoding];
}
@end

c。ヘッダーファイルを作成し、名前を付けますWrapCpp_to_RN.h

wrapSayHello関数をSwiftファイルにエクスポートします

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

5. iOS（Swift）側での作業

C++関数をReactNativeにエクスポートするには

a。Swiftファイルを作成し、名前を付けますSendCpp_to_RN.swift

注：Xcodeは、NativeModules-Bridging-Header.hファイルを作成するように要求します。

クラスSendCpp_to_RNを作成し、次のように宣言しますNSObject

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

requiresMainQueueSetup()アプリケーション実行時の警告を防ぐ関数を作成する

#import <Foundation/Foundation.h>
@interface WrapCpp_to_RN : NSObject
- (NSString *) wrapSayHello;
@end

WrapCpp_to_RN()fromをラップする関数を記述しますWrapCpp_to_RN.mm

import Foundation@objc(SendCpp_to_RN)
class SendCpp_to_RN : NSObject {
    
  @objc static func requiresMainQueueSetup() -> Bool {
        return false
    }
  
  @objc func fromCpp(_ successCallback: RCTResponseSenderBlock) -> Void {
    successCallback([NSNull(), WrapCpp_to_RN().wrapSayHello() as Any])
    }}

b。Swiftファイルのラップ関数をReactNativeにエクスポートします

を使用してSwiftクラスとその関数をエクスポートするObjectiveCファイルを作成しますCallback

#import <React/RCTBridgeModule.h>
#import <Foundation/Foundation.h>
#import "UIKit/UIKit.h"
@interface RCT_EXTERN_MODULE(SendCpp_to_RN, NSObject)RCT_EXTERN_METHOD(fromCpp:(RCTResponseSenderBlock)successCallback)@end

c。SwiftをReactNativeに接続し、NativeModules-Bridging-Header.h ファイルを開きます

#import <React/RCTBridgeModule.h>#import <React/RCTViewManager.h>#import "WrapCpp_to_RN.h"

6.ReactNative側での作業

Swiftクラスとその関数を呼び出す

import React from 'react';
import {StyleSheet, Text, View, NativeModules, Button} from 'react-native';const App = () => {
  const onPress = () => {
    const {SendCpp_to_RN} = NativeModules;
    SendCpp_to_RN.fromCpp((_err, res) => console.log(res));
  };
  return (
    <View style={styles.container}>
      <Text> Practice !</Text>
      <Button title="C++ to React Native" color="#841584" onPress={onPress} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

これで完了です。アプリケーションを実行するだけです。

react-native run-ios

または、Xcodeの「実行」ボタンをクリックして、実行内容を確認してください。

私の記事がお役に立てば幸いです。お読みいただきありがとうございます。

ソース：https ：//betterprogramming.pub/native-modules-export-c-function-to-react-native-for-beginners-77e89934b210

#cpp #cplusplus #react

What is GEEK

Buddha Community