IOS और Android के लिए रिएक्टिव नेटिव और C ++ इंटीग्रेशन

हाल ही में, मुझे एक दिलचस्प परियोजना पर काम करने की पेशकश की गई थी। रिएक्ट नेटिव का उपयोग करके आईओएस और एंड्रॉइड पर अमेरिकी स्टार्टअप के लिए एक मोबाइल एप्लिकेशन विकसित करना आवश्यक था। मुख्य तकनीकी विशेषता और कारक जिसने असमान रूप से परियोजना में मेरी भागीदारी का फैसला किया, वह C ++ में लिखी गई लाइब्रेरी को एकीकृत करने का कार्य था। मेरे लिए, यह एक नया अनुभव और एक नया पेशेवर परीक्षण हो सकता है।

C ++ लाइब्रेरी को एकीकृत करना क्यों आवश्यक था

यह एप्लिकेशन FIDO UAF और U2F प्रोटोकॉल का उपयोग करते हुए बायोमेट्रिक डेटा, जैसे फेस आईडी और टच आईडी और एंड्रॉइड प्लेटफॉर्म के लिए समान तकनीकों का उपयोग करके दो-कारक प्रमाणीकरण के लिए आवश्यक था। प्रमाणीकरण के लिए ग्राहक पहले से ही तैयार था। यह C ++ में लिखी गई एक लाइब्रेरी थी और इसका उपयोग मोबाइल एप्लिकेशन के अलावा कुछ अन्य ग्राहकों द्वारा किया जाता था। इसलिए मुझे रिएक्ट नेटिव पर एक मोबाइल एप्लिकेशन में इसे इसी तरह से एकीकृत करने की आवश्यकता थी।

मैंने यह कैसे किया?

C ++ को Facebook के React Native ऐप में एकीकृत करने का एक तरीका है। हालांकि, समस्या यह है कि यह केवल आईओएस प्लेटफॉर्म के लिए काम करता है, और यह स्पष्ट नहीं है कि इस मामले में एंड्रॉइड के साथ क्या करना है। मैं एक ही बार में दो प्लेटफार्मों के लिए समस्या को हल करना चाहता था।

ड्रॉपबॉक्स जिनी उपकरण का एक कांटा जो आपको क्रॉस-प्लेटफॉर्म प्रकार की घोषणाओं को उत्पन्न करने की अनुमति देता है। अनिवार्य रूप से, यह एक सरल रिएक्ट नेटिव मोबाइल ऐप है जिसमें जिनी को अनुकूलित कनेक्शन दिया गया है। मैंने इसे एक आधार के रूप में लिया।

सुविधा के लिए, एप्लिकेशन कोड को दो गिट रिपॉजिटरी में विभाजित किया गया है। पहला रिएक्ट नेटिव एप्लिकेशन के स्रोत कोड को संग्रहीत करता है, और दूसरे में जिनीनी और आवश्यक निर्भरताएं शामिल हैं।

आगे के कदम

सबसे पहले आपको C ++ और React Native कोड के इंटरैक्शन के लिए एक इंटरफ़ेस घोषित करने की आवश्यकता है। Djinni में, .id फ़ाइलों का उपयोग करके किया जाता है। परियोजना में फ़ाइल प्रतिक्रिया-देशी-सीपीपी-समर्थन / आईडीएल / मुख्य.डिजाइन खोलें और इसकी संरचना से परिचित हों।

हमारी सुविधा के लिए, कुछ जावास्क्रिप्ट डेटा प्रकार और उनके लिए बाइंडिंग पहले से ही परियोजना में घोषित किए गए हैं। इस प्रकार, हम बिना किसी अतिरिक्त विवरण के स्ट्रिंग, एरियर, मैप, प्रॉमिस और अन्य के साथ काम कर सकते हैं।

उदाहरण में, यह फ़ाइल इस तरह दिखती है:

DemoModule = interface +r { const EVENT_NAME: string = "DEMO_MODULE_EVENT"; const STRING_CONSTANT: string = "STRING"; const INT_CONSTANT: i32 = 13; const DOUBLE_CONSTANT: f64 = 13.123; const BOOL_CONSTANT: bool = false; testPromise(promise: JavascriptPromise); testCallback(callback: JavascriptCallback); testMap(map: JavascriptMap, promise: JavascriptPromise); testArray(array: JavascriptArray, callback: JavascriptCallback); testBool(value: bool, promise: JavascriptPromise); testPrimitives(i: i32, d: f64, callback: JavascriptCallback); testString(value: string, promise: JavascriptPromise); testEventWithArray(value: JavascriptArray); testEventWithMap(value: JavascriptMap); } 

इंटरफेस फ़ाइल में परिवर्तन करने के बाद, आपको जावा / ऑब्जेक्टिव-सी / सी ++ इंटरफेस को फिर से बनाने की आवश्यकता है। यह प्रतिक्रिया-देशी-सीपीपी-समर्थन / आईडीएल / फ़ोल्डर से जेनरेट_वैपर्स.श स्क्रिप्ट चलाकर करना आसान है। यह स्क्रिप्ट हमारी आईडी फ़ाइल से सभी विज्ञापनों को एकत्रित करेगी और उनके लिए उपयुक्त इंटरफेस बनाएगी, यह बहुत सुविधाजनक है।

उदाहरण में, दो सी ++ फाइलें हैं जो हमें रुचि देती हैं। पहले में एक विवरण शामिल है, और सरल C ++ विधियों का दूसरा कार्यान्वयन:

प्रतिक्रिया-मूल-सीपीपी / सीपीपी / डेमोएमोड्यूलइम्प्ल.एचपी
प्रतिक्रिया-मूल-सीपीपी / सीपीपी / डेमोमॉड्यूलइम्प्ल.कैप

उदाहरण के रूप में किसी एक विधि के कोड पर विचार करें:

 void DemoModuleImpl::testString(const std::string &value, const std::shared_ptr<::JavascriptPromise> &promise) { promise->resolveObject(JavascriptObject::fromString("Success!")); } 

कृपया ध्यान दें कि परिणाम कीवर्ड वापसी का उपयोग करके वापस नहीं किया गया है, लेकिन अंतिम पैरामीटर द्वारा पारित जावास्क्रिप्टप्रोमिस ऑब्जेक्ट का उपयोग करते हुए, जैसा कि आइडियल फ़ाइल में वर्णित है।

अब यह स्पष्ट हो गया कि C ++ में आवश्यक कोड का वर्णन कैसे करें। लेकिन एक रिएक्टिव नेटिव ऐप में इससे कैसे इंटरैक्ट करें? समझने के लिए, प्रतिक्रिया-देशी-सीपीपी / index.js फ़ोल्डर से फ़ाइल खोलें, जहां उदाहरण में वर्णित सभी फ़ंक्शन कहलाते हैं।

हमारे उदाहरण से फ़ंक्शन को जावास्क्रिप्ट में कहा जाता है:

 import { NativeAppEventEmitter, NativeModules... } from 'react-native'; const DemoModule = NativeModules.DemoModule; .... async promiseTest() { this.appendLine("testPromise: " + await DemoModule.testPromise()); this.appendLine("testMap: " + JSON.stringify(await DemoModule.testMap({a: DemoModule.INT_CONSTANT, b: 2}))); this.appendLine("testBool: " + await DemoModule.testBool(DemoModule.BOOL_CONSTANT)); // our sample function this.appendLine("testString: " + await DemoModule.testString(DemoModule.STRING_CONSTANT)); } 

अब यह स्पष्ट है कि परीक्षण फ़ंक्शन C ++ और जावास्क्रिप्ट के पक्ष में कैसे काम करता है। इसी तरह, आप किसी भी अन्य फ़ंक्शन का कोड जोड़ सकते हैं। आगे मैं इस बात पर विचार करूंगा कि Android और iOS प्रोजेक्ट्स C ++ के साथ कैसे काम करते हैं।

एंड्रॉयड के लिए रिएक्टिव नेटिव और सी ++

Android और C ++ की सहभागिता के लिए, आपको NDK इंस्टॉल करना होगा। यह कैसे करें इस बारे में विस्तृत निर्देश डेवलपर. android.com/ndk/guides पर उपलब्ध हैं
फिर, प्रतिक्रिया-मूल-सीपीपी / एंड्रॉइड / ऐप / बिल्ड.ग्रेड फ़ाइल के अंदर, आपको निम्न सेटिंग्स जोड़ने की आवश्यकता है:

 android { ... defaultConfig { ... ndk { abiFilters "armeabi-v7a", "x86" } externalNativeBuild { cmake { cppFlags "-std=c++14 -frtti -fexceptions" arguments "-DANDROID_TOOLCHAIN=clang", "-DANDROID_STL=c++_static" } } } externalNativeBuild { cmake { path "CMakeLists.txt" } } sourceSets { main { java.srcDirs 'src/main/java', '../../../react-native-cpp-support/support-lib/java' } } splits { abi { reset() enable enableSeparateBuildPerCPUArchitecture universalApk false // If true, also generate a universal APK include "armeabi-v7a", "x86" } } ... } 

हमने सिर्फ उपयोग किए गए आर्किटेक्चर के लिए एप्लिकेशन बनाने के लिए कॉन्फिल्ड कॉन्फ़िगर किया है और सीमेक के लिए आवश्यक बिल्ड फ्लैग को जोड़ा है, CMAkeLists फाइल को निर्दिष्ट किया है, जिसे हम भविष्य में वर्णन करेंगे, और जिनी से जावा क्लासेस को भी जोड़ा है जिसका हम उपयोग करेंगे।
Android प्रोजेक्ट स्थापित करने का अगला चरण CMakeLists.txt का वर्णन करना है । समाप्त रूप में, इसे पथ प्रतिक्रिया-देशी-सीपीपी / एंड्रॉइड / ऐप / CMakeLists.txt के साथ देखा जा सकता है।

 cmake_minimum_required(VERSION 3.4.1) set( PROJECT_ROOT "${CMAKE_SOURCE_DIR}/../.." ) set( SUPPORT_LIB_ROOT "${PROJECT_ROOT}/../react-native-cpp-support/support-lib" ) file( GLOB JNI_CODE "src/main/cpp/*.cpp" "src/main/cpp/gen/*.cpp" ) file( GLOB PROJECT_CODE "${PROJECT_ROOT}/cpp/*.cpp" "${PROJECT_ROOT}/cpp/gen/*.cpp" ) file( GLOB PROJECT_HEADERS "${PROJECT_ROOT}/cpp/*.hpp" "${PROJECT_ROOT}/cpp/gen/*.hpp" ) file( GLOB DJINNI_CODE "${SUPPORT_LIB_ROOT}/cpp/*.cpp" "${SUPPORT_LIB_ROOT}/jni/*.cpp" ) file( GLOB DJINNI_HEADERS "${SUPPORT_LIB_ROOT}/cpp/*.hpp" "${SUPPORT_LIB_ROOT}/jni/*.hpp" ) include_directories( "${SUPPORT_LIB_ROOT}/cpp" "${SUPPORT_LIB_ROOT}/jni" "${PROJECT_ROOT}/cpp" "${PROJECT_ROOT}/cpp/gen" ) add_library( # Sets the name of the library. native-lib # Sets the library as a shared library. SHARED ${JNI_CODE} ${DJINNI_CODE} ${DJINNI_HEADERS} ${PROJECT_CODE} ${PROJECT_HEADERS} ) 

यहां हमने समर्थन लाइब्रेरी के सापेक्ष रास्तों को इंगित किया, आवश्यक C ++ और JNI कोड के साथ निर्देशिकाओं को जोड़ा।

एक और महत्वपूर्ण कदम हमारे प्रोजेक्ट में DjinniModulesPackage को जोड़ना है। ऐसा करने के लिए, फ़ाइल में प्रतिक्रिया-मूल-सीपीपी / एंड्रॉइड / ऐप / src / main / java / com / rncpp / jni / DjinniModulesPackage.java हम निर्दिष्ट करते हैं:

 ... import com.rncpp.jni.DjinniModulesPackage; ... public class MainApplication extends Application implements ReactApplication { ... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new DjinniModulesPackage() ); } ... } 

अंतिम महत्वपूर्ण विवरण DjinniModulesPackage वर्ग का वर्णन है जिसका उपयोग हमने अपने आवेदन के मुख्य वर्ग में किया था। यह पथ प्रतिक्रिया-मूल-सीपीपी / एंड्रॉइड / ऐप / src / main / java / com / rncpp / jni / DjinniModulesPackage.java पर स्थित है और इसमें निम्न कोड शामिल हैं:

 package com.rncpp.jni; 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 DjinniModulesPackage implements ReactPackage { static { System.loadLibrary("native-lib"); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new DemoModule(reactContext)); return modules; } } 

उपरोक्त वर्ग में सबसे बड़ी रुचि लाइन System.loadLibrary ("देशी-लिबास") है; जिसके लिए हम अपने एंड्रॉइड एप्लिकेशन में लाइब्रेरी को अपने मूल कोड और जिनी कोड के साथ लोड करते हैं।

यह समझने के लिए कि यह कैसे काम करता है, मैं आपको अपने आप को फ़ोल्डर से jni कोड से परिचित करने की सलाह देता हूं, जो हमारे मॉड्यूल की कार्यक्षमता के साथ काम करने के लिए jni आवरण है, और इसका इंटरफ़ेस idl फ़ाइल में वर्णित है।

नतीजतन, अगर एंड्रॉइड डेवलपमेंट वातावरण और रिएक्ट नेटिव कॉन्फ़िगर किया गया है, तो आप एंड्रॉइड पर रिएक्ट नेटिव प्रोजेक्ट का निर्माण और चला सकते हैं। ऐसा करने के लिए, टर्मिनल में दो कमांड निष्पादित करें:

npm स्थापित करें
npm रन Android

हुर्रे! हमारा प्रोजेक्ट काम कर रहा है!

और हम एंड्रॉइड एमुलेटर (क्लिक करने योग्य) की स्क्रीन पर निम्न चित्र देखते हैं:



अब देखते हैं कि C ++ के साथ iOS और रिएक्टिव नेटिव कैसे काम करते हैं।

IOS के लिए रिएक्टिव नेटिव और C ++

Xcode में प्रतिक्रिया-देशी-सीपीपी परियोजना खोलें।

सबसे पहले, समर्थन पुस्तकालय से उद्देश्य-सी और सी ++ परियोजना में उपयोग किए गए कोड के लिंक जोड़ें। ऐसा करने के लिए, प्रतिक्रिया-देशी-सीपीपी-समर्थन / समर्थन-देयता / objc / और प्रतिक्रिया-मूल-सीपीपी-समर्थन / समर्थन- lib / सीपीपी / फ़ोल्डर की सामग्री को Xcode परियोजना में स्थानांतरित करें। परिणामस्वरूप, कोड समर्थन लाइब्रेरी वाले फ़ोल्डर प्रोजेक्ट संरचना ट्री (चित्र क्लिक करने योग्य हैं) में प्रदर्शित किए जाएंगे:





इस प्रकार, हमने समर्थन लाइब्रेरी से प्रोजेक्ट में जावास्क्रिप्ट प्रकारों का विवरण जोड़ा।

अगला कदम हमारे परीक्षण सी ++ मॉड्यूल के लिए उत्पन्न उद्देश्य-सी रैपर को जोड़ना है। हमें परियोजना के लिए प्रतिक्रिया-मूल-सीपीपी / आईओएस / आरएनपीसीपी / जनरेट / फ़ोल्डर से कोड को स्थानांतरित करने की आवश्यकता है।

यह हमारे मॉड्यूल के C ++ कोड को जोड़ने के लिए बना हुआ है, जिसके लिए हम कोड को प्रतिक्रिया-मूल-सीपीपी / सीपीपी / और प्रतिक्रिया-मूल-सीपीपी / सीपीपी / जीन / फ़ोल्डर से परियोजना में स्थानांतरित करते हैं।

परिणामस्वरूप, प्रोजेक्ट संरचना ट्री निम्नानुसार दिखाई देगा (चित्र क्लिक करने योग्य है):



आपको यह सुनिश्चित करने की आवश्यकता है कि बिल्ड फ़ाइल्स टैब के अंदर संकलित फ़ाइलें संकलित सूची में दिखाई दें।



(तस्वीर क्लिक करने योग्य है)

अंतिम कदम AppDelegate.m फ़ाइल के कोड को बदलने के लिए है जब अनुप्रयोग शुरू होता है, तो जिनी मॉड्यूल को प्रारंभ करना। और इसके लिए आपको कोड की निम्नलिखित पंक्तियों को बदलना होगा:

 ... #import "RCDjinniModulesInitializer.h" ... @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... id<RCTBridgeDelegate> moduleInitialiser = [[RCDjinniModulesInitializer alloc] initWithURL:jsCodeLocation]; RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:moduleInitialiser launchOptions:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"rncpp" initialProperties: nil]; ... } 

अब iOS पर हमारा ऐप लॉन्च करें। (तस्वीर क्लिक करने योग्य है)




आवेदन काम कर रहा है!

हमारे प्रोजेक्ट में C ++ लाइब्रेरी जोड़ना।

उदाहरण के लिए, हम लोकप्रिय ओपनएसएसएल पुस्तकालय का उपयोग करते हैं।

और शुरुआत करते हैं एंड्रॉइड से।

हम एंड्रॉइड के लिए पहले से निर्मित ओपनएसएसएल लाइब्रेरी के साथ रिपॉजिटरी को क्लोन करते हैं।

CMSSLists.txt फ़ाइल में OpenSSL लाइब्रेरी शामिल करें:

 .... SET(OPENSSL_ROOT_DIR /Users/andreysaleba/projects/OpenSSL-for-Android-Prebuilt/openssl-1.0.2) SET(OPENSSL_LIBRARIES_DIR "${OPENSSL_ROOT_DIR}/${ANDROID_ABI}/lib") SET(OPENSSL_INCLUDE_DIR ${OPENSSL_ROOT_DIR}/include) SET(OPENSSL_LIBRARIES "ssl" "crypto") ... LINK_DIRECTORIES(${OPENSSL_LIBRARIES_DIR} ${ZLIB_LIBRARIES_DIR}) include_directories( "${SUPPORT_LIB_ROOT}/cpp" "${SUPPORT_LIB_ROOT}/jni" "${PROJECT_ROOT}/cpp" "${PROJECT_ROOT}/cpp/gen" "${OPENSSL_INCLUDE_DIR}" ) add_library(libssl STATIC IMPORTED) add_library(libcrypto STATIC IMPORTED) ... set_target_properties( libssl PROPERTIES IMPORTED_LOCATION ${OPENSSL_LIBRARIES_DIR}/libssl.a ) set_target_properties( libcrypto PROPERTIES IMPORTED_LOCATION ${OPENSSL_LIBRARIES_DIR}/libcrypto.a ) target_link_libraries(native-lib PRIVATE libssl libcrypto) 

फिर हम अपने सी ++ मॉड्यूल को एक साधारण फ़ंक्शन कोड में जोड़ते हैं जो ओपनएसएसएल लाइब्रेरी के संस्करण को वापस करता है।

फ़ाइल में प्रतिक्रिया-देशी-सीपीपी / सीपीपी / डेमोमॉडुलेइम्प्ल.हप्प जोड़ें:

 void getOpenSSLVersion(const std::shared_ptr<::JavascriptPromise> & promise) override; 

फ़ाइल में प्रतिक्रिया-मूल-सीपीपी / सीपीपी / डेमोमॉड्यूलइम्प्ल.कैप जोड़ें:

 #include <openssl/crypto.h> ... void DemoModuleImpl::getOpenSSLVersion(const std::shared_ptr<::JavascriptPromise> &promise) { promise->resolveString(SSLeay_version(1)); } 

यह idl फ़ाइल में नए फ़ंक्शन के इंटरफ़ेस का वर्णन करने के लिए रहता है `प्रतिक्रिया-देशी-सीपीपी-समर्थन / आईडीएल / main.djinha` :

  getOpenSSLVersion(promise: JavascriptPromise); 

हम फ़ोल्डर से '`generate_wrappers.sh` स्क्रिप्ट को` रिएक्ट-देशी-सीपीपी-सपोर्ट / आईडीएल / `कहते हैं ।

फिर, जावास्क्रिप्ट में, हम नए बनाए गए फ़ंक्शन को कॉल करते हैं:

 async promiseTest() { ... this.appendLine("openSSL version: " + await DemoModule.getOpenSSLVersion()); } 

सब कुछ Android के लिए तैयार है।
आईओएस पर चलते हैं।

हम iOS के लिए ओपनएसएसएल लाइब्रेरी के इकट्ठे संस्करण के साथ रिपॉजिटरी को क्लोन करते हैं।

Xcode में iOS प्रोजेक्ट खोलें और सेटिंग्स में बिल्ड सेटिंग्स टैब में अन्य C Flags फ़ील्ड में Opensl लाइब्रेरी का पथ जोड़ें (मेरे कंप्यूटर पर पथ का एक उदाहरण नीचे है):
-मैं / उपयोगकर्ता / andreysaleba / परियोजनाओं / prebuilt- खुलता है / जिला / खुलता है-1.0.2d-ios / शामिल

अन्य लिंकर फ्लैग्स फ़ील्ड में, निम्न पंक्तियाँ जोड़ें:

 -L/Users/andreysaleba/projects/prebuilt-openssl/dist/openssl-1.0.2d-ios/lib -lcrypto -lssl 

सब कुछ तैयार है। OpenSSL पुस्तकालय दोनों प्लेटफार्मों के लिए जोड़ा गया।

देखने के लिए धन्यवाद!