1656981060
今日も、ネイティブモジュールとC++での経験を共有し続けています。
多くのC/C ++ライブラリがモバイルプラットフォーム用に作成されているので、それらをiOSまたはReactNativeアプリケーションに実装する必要があります。そのため、関数をC++からReactNativeにエクスポートする方法についての記事を書きたいと思います。これは、理解しやすく、初心者の時間を節約できます。新しいreactネイティブアプリケーションから始めます
npx react-native init NativeModules
新しい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";
}
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
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"
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の「実行」ボタンをクリックして、実行内容を確認してください。
私の記事がお役に立てば幸いです。お読みいただきありがとうございます。
1656981060
今日も、ネイティブモジュールとC++での経験を共有し続けています。
多くのC/C ++ライブラリがモバイルプラットフォーム用に作成されているので、それらをiOSまたはReactNativeアプリケーションに実装する必要があります。そのため、関数をC++からReactNativeにエクスポートする方法についての記事を書きたいと思います。これは、理解しやすく、初心者の時間を節約できます。新しいreactネイティブアプリケーションから始めます
npx react-native init NativeModules
新しい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";
}
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
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"
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の「実行」ボタンをクリックして、実行内容を確認してください。
私の記事がお役に立てば幸いです。お読みいただきありがとうございます。