Reaks Yerli Modüllere Giriş
Reaks Yerli, JavaScript ve Reaks kullanarak çapraz platform mobil uygulamaları inşa etmeye geliştiricileri güçlendiriyor.Kolaylı bir set ile inşa edilmiş bileşenleri ortak UI elemanları ve temel cihazlar için, üretim uygulamaları genellikle React Native’s varsayılan JavaScript runtime.Uzman ve platforma özgü kodlar arasında köprüyü anlamak için kapasiteye sahip, Kotlin veya Java. onlar donanım sensörlerine, sistem hizmetlerine, üçüncü taraf SDK'lara erişim sağlarlar ve performansa duyarlı özellikler, aksi takdirde doğru bir şekilde JavaScript ile pratik yapmak zor veya imkansız olacaktır.
Bu kılavuzda, yerel bir modülün tüm yaşam döngüsünden geçeceğiz - çevrenizi kurmak ve platform kod yazmaktan, modülü kaydetmek, yöntemleri ortaya çıkarmak ve JavaScript'iniz ile en iyi uygulamaları, performans değerlendirmelerini ve kameraya erişmek gibi gerçek dünya örneklerini kapsayacak şekilde, arka plan görevlerini yürütmek ve temalarınızla iletişim kuracağız.
Yerli Modülleri ve Köprüleri Anlayın
Anada, Reaks Yerli'nin mimarisi, JS'den bir ana modüle sahip bir köprüye dayanıyor ve bu model, platformun güvenli erişimli erişimli erişimli erişimlere izin veriyor.
Yerli modüller özellikle aşağıdaki senaryolarda değerlidir:
- Bir yerel kütüphaneyi (örneğin, ödeme işleme, makine öğrenmesi veya artırılmış gerçeklik) entegre etmeniz gerekir, bu JavaScript sarmalayıcı değildir.
- JS thread (örneğin, görüntü işleme, ses sentezi) tarafından yavaşlanacak yüksek performanslı, düşük değer işlemleri gerektirir.
- Reakt Yerlisinin çekirdeğinin bir parçası olmayan platforma özel özellikler erişim zorundasınız – iOS HomeKit veya Android'in Biyometrik Prompt gibi.
- Bir Reaksiyon Yerli uygulaması ve mevcut bir yerel kodbase arasında kod paylaşmak istiyorsunuz.
Uygulamaya başlamadan önce, ana modüllerin “sihirli bir mermi” olmadığını anlamak önemlidir - her platformda test gerektirir ve thread güvenli endişeleri tanıtabilir. Ancak, judicious olarak kullanıldığında, uygulamanızı basit çapraz rakiplerden ayıran gelişmiş işlevsellik türlerini sağlarlar.
Geliştirme Çevrenizi Ayarlayın
Yerli modüller oluşturmak için, hem Android hem de iOS için standart Reaks Yerli gelişimi ortamına ihtiyacınız var. Bu, Java/Kotlin'in Android için araç (Android Studio, Gradle, Android SDK) ve iOS için CocoaPods (veya Swift Paket Yöneticisi) ile bağlantı kurmadan önce yazılmış bir veritabanına ihtiyacınız var.
Çoğu geliştirici, proje içinde oluşturulan bir Reaksiyon Yerli projesi ile başlar:0).Projede, yerli modüller genellikle açıklığa yönelik olarak iniz.3.Bölümler için modülerlik ve reusability için, aynı zamanda yerel modülünüzü ayrı bir npm paketi olarak da kapatabilirsiniz - birçok topluluk modülleri bu modeli takip ederiz.
Bir Yerli Modül Yaratmak: Temeller
Her ana modül iki bölümden oluşur: platforma özel uygulama ( iOS için biri) ve JavaScript tüketimi kodu. Her platform için adımları kıralım.
Android (Kotlin/Java)
Android'de, www.FLT:3'i genişleten bir sınıf yaratırsınız ve ortaya çıkarmak istediğiniz yöntemleri uygularsınız. JavaScript'den çağrılabilir olan her yöntem, BEFLT:4 ile bir nota sahip olmalıdır ve bir çağrı / geri dönüş türüne sahip olmak gerekir.
package com.yourapp
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import com.facebook.react.bridge.Promise
class MyNativeModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
override fun getName(): String = "MyNativeModule"
@ReactMethod
fun doSomething(param: String, promise: Promise) {
try {
// Perform native work here
val result = "Hello from Kotlin! Received: $param"
promise.resolve(result)
} catch (e: Exception) {
promise.reject("ERROR", e.message)
}
}
}Modülü tanımlamadan sonra, Reak Yerli'nin paket sistemi ile kayıt olmalısınız.Uygulamalar ) uygulayan bir paket sınıfı oluşturun:
package com.yourapp
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ViewManager
class MyNativePackage : ReactPackage {
override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
return listOf(MyNativeModule(reactContext))
}
override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
return emptyList()
}
}Son olarak, paketi sizin için [[Döntgenlik: 9) (veya [[DüzD:11) yöntemine ekleyin:
override fun getPackages(): List<ReactPackage> {
val packages = PackageList(this).packages
packages.add(MyNativePackage())
return packages
}iOS (Swift/Objective-C)
iOS'ta, yerel modüller genellikle Objektif veya Swift'te yazılır. Reakt Yerli, akranya uygun bir üst dosya ve uygulama bekler. ”For Swift için, bir bridging başlığı oluşturmanız gerekir. İşte bir Objektif örneği:
// MyNativeModule.h
#import <React/RCTBridgeModule.h>
@interface MyNativeModule : NSObject <RCTBridgeModule>
@end
// MyNativeModule.m
#import "MyNativeModule.h"
#import <React/RCTLog.h>
@implementation MyNativeModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(doSomething:(NSString *)param
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSString *result = [NSString stringWithFormat:@"Hello from iOS! Received: %@", param];
resolve(result);
}
@endiOS için ek paket kaydı gerekli değildir - Reaks Yerli otomatik olarak algın. ancak, hedefinizde .m dosyasının derlenmesi ve herhangi bir yerli bağımlılık eklerseniz.
Swift için adımlar benzer ama aynı şekilde İLRAT:17’ye ihtiyaç duyuyor ve bir bridging başlığı. Tipik Swift uygulaması buna benzer görünüyor:
import Foundation
@objc(MyNativeModule)
class MyNativeModule: NSObject {
@objc
func doSomething(_ param: String, resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
let result = "Hello from Swift! Received: \(param)"
resolve(result)
}
}Objektifinizin başlığı altında bulunan "Geçmiş" nin ithal edilmesini unutmayın: “Şerefli Başlık: 03.
JavaScript'ten Yerli Modüller
Ana modülünüzün uygulandığı ve kayıtlı olduğu zaman, WordPCT:21 aracılığıyla Reaksiyonel JavaScript koduna erişebilirsiniz.Inglish: (Android) veya [[TELFLT:23) (iOS) modülün göründüğü anahtar haline gelir. Örneğin:
import { NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;
// Calling an exported method
MyNativeModule.doSomething('React Native')
.then(result => console.log(result))
.catch(error => console.error(error));Ayrıca gerekli olan IP'leri veya olay eller kullanabilirsiniz. JavaScript'deki yöntem adı tam olarak yerel kodda ihraç ettiğiniz yöntem adı eşleştirmeli. Reaksiyon Yerli haritaları 1:1, Android yönteminin geçersizliğini göz ardı edin.
Birden fazla parametreyi kabul eden yöntemler için, onları sadece argüman olarak geç - köprü serileştirmeyi ele alacaktır. Desteklenen parametre türleri: “Üyetim: 03:27) veya çözümleyici bloklar (örneğin,) tavsiye edilir, çünkü Yerli Reaktör'ün ahenk doğası ile temiz bir şekilde bütünleşir.
Gelişmiş İletişim Desenleri
Temel yöntem birçok kullanım vakalarını kapsamakla birlikte, gelişmiş özellikler genellikle daha sofistike iletişim kalıpları gerektirir. Reaksiyon Yerlisi birkaç mekanizmayı destekler:
Geri bildirimler vs. Promises
Bir zamanlar için, söz konusu kaynaklar en temizdir. Sürekli veri akışları için (örneğin, sensör okumaları), çağrıları tercih edebilirsiniz. ancak, çağrıları modern Reaksiyon Yerlisinde daha az yaygındır, çünkü akışlar çağrıya yol açabilirler.
Yerliden JavaScript'e kadar Eating Events from Native to JavaScript
Veriler, yerel koddan JS'ye (örneğin, yerel bir sensör güncellemeleri) doğru bir şekilde göndermek için, olayı tekton olarak kullanabilirsiniz. Android'de, [[ŞampingFLT:35) arayın ve arayın:
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
.emit("onSensorUpdate", Arguments.createMap().apply {
putString("data", sensorValue)
})iOS'ta ithalatRANT:38'de ve override olayları destekledi:
@implementation MyNativeModule
RCT_EXPORT_MODULE();
- (NSArray<NSString *> *)supportedEvents {
return @[@"onSensorUpdate"];
}
// In your native method or delegate callback:
[self sendEventWithName:@"onSensorUpdate" body:@{@"data": sensorValue}];
@endJavaScript'te, olaya abone olmak için [[Dönetici:
import { NativeEventEmitter, NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(MyNativeModule);
eventEmitter.addListener('onSensorUpdate', (event) => {
console.log('Sensor data:', event.data);
});Kılavuz hafıza sızıntılarından kaçınmak için önlediği zaman dinleyicileri kaldırmayı unutmayın.
Thread Management and Performance
Varsayılan olarak, tüm yerel modül yöntemi yerel iplik havuzunda çalıştırılır, UI threadten ayrıdır. Bu, UI'yi doğrudan yerel modülünüzden güncellemeniz gerekir (örneğin, ağır bir hesaplama yapmak ve bir görüş güncellemek), ana konuya çalışmanız gerekir.
Uzun süreli arka plan görevleri (örneğin veritabanı senkronizasyonu veya Bluetooth tarama gibi), köprüyü engellemek için geri çağrışımları veya çağrıları kullanmayı düşünün. Ayrıca yerel modülünüzdeki ek iplikleri deneyebilirsiniz, ancak işleyici güvenlik ile dikkatli olmalısınız - paylaşılan durum senkronize edilmelidir.
Performans ipucu: Köprü aracılığıyla geçirilen verilerin boyutunun en aza indirilmesi. Büyük diziler veya ikili blobs (örneğin, görüntüler) JSON'da serileştirilmiş dosya yollarında veya referanslarla ele alınmalıdır.
Gerçek Dünya Örnekleri
Kavramları sağlamlaştırmak için, yerel modüllerin vazgeçilmez olduğu iki ortak kullanım vakalarını inceleyelim.
Kamera Access
Reaks Yerli'nin yerleşik bir şekilde inşa edilmiş bir ⁇ FLT:45 var, ancak kamerayı açmayın, bir fotoğraf çekmek ve JS'ye görüntü yolunu geri döndürün - örneğin, Android'in 444T:46'si API veya iOS'sETHFLT:47T:47'si ile ilgili olarak, ekran işleme, flaş ayarlarını ve manuel odaklamanızı içeren yöntemleri ortaya çıkarabilirsiniz.
Bluetooth Low Energy (sol) İletişim
Düzeltme periferilere (örneğin, kalp hızı monitörleri, arılar) bağlanmak, yerel bir modül cihazlar için taramak, bağlantı kurmak, hizmetleri keşfedin ve sadece özelliklerinizi ortaya çıkarmak ve sık sık sık aramanız, eating events (örneğin::50) veya [[FONT) doğal bir modeldir. Birkaç açık kaynak değiştirilebilir modüller mevcut, ancak uygulama ihtiyaçlarınızı ortaya çıkarır ve size sadece işlevselliğinizi ortaya çıkarırsınız.
En İyi Uygulamalar ve Pitfalls
- [[Dönetici kodu için birim testleri yaz.[Dönetici:0) Hem Android Studio hem de Xcode test çerçevelerini sağlar (JUnit, XC). Modülinizin Yerli Reakle entegrasyondan önce izolasyondaki yöntemlerini test edin.
- [FONT:0]Handle izinler mükemmel bir şekilde.[DÜDÜDÜ] Birçok Yerli modüller iş zaman izinleri (camera, konum, Bluetooth) Reaksiyon Yerli'nin Android için işe yarar, ancak iOS için yerel modülünüzde izin talep etmeniz veya bir kütüphane kullanmanız gerekir; asla izin verilir; reddedilme ile başa çıkmak.
- [FONT:0) Köprü ışığı tut.[Döneticileri sık sık sık sık sık sık geçmeyin. Yüksek frekanslı verileri (örneğin, 100Hz'de sensör), yerel kod pre-işlemleri verilerinin ve yalnızca toplam sonuçları gönderen bir modele toplu olarak geçmeyi düşünün.
- [FONT:0) Yerel modülün API'sini tamamen garanti eder.[ °T:1] Her yöntemi tanımlamak için JSDoc veya bir OKME kullanın, parametreleri, geri dönüş değerleri ve platform farklılıkları.Diğer ekip üyeleri veya açık kaynak topluluğunun modülünüzü tükettiği zaman önemlidir.
- [FONT:0) Uygulamanın başlamasından sonra sadece uygulama başlatılır.[16] Çünkü yerli modüller köprüye hazır, çok erken erişimli (örneğin, küresel bir bağlamda) sonuçlanabilir.
- [FONT:0] Mümkün olduğunda mevcut modüller göz önünde bulundurun.[FONT:0).Reaktif Yerli ekosistemin binlerce paketi var, mevcut olanları yazmadan önce, neredeyse ihtiyacınız olan bir modül bulursanız, tekerleği yeniden icat etmeyi düşünün.
- [FONT:0) Yeni projeler için TurboModules'i düşünün.[#0] Reaksiyon Yerli 0.6'dan başlayarak, TurboModules ile yeni mimari daha iyi performans ve JavaScript-native memory paylaşımı sunar.Eğer yeni bir uygulama başlatırsanız, TurboModules (Yeni Mimarlıkta) eski köprü yerine yeni bir uygulama kullanın.
Dış Kaynaklar
Yerel modül geliştirmesine daha derin bir şekilde atlatmak, resmi belgeye bakınız:0) Yerel modüllerdeki Yerli dokümanlar). platformun özel rehberliği için, [[Döneticileri:2) Android geliştirici rehberleri[Döneticileri[Döneticileri ile ilgili olarak inceleyebilirsiniz.[Dönetici referanslar).
Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç Sonuç
Yerli modüller, Reaksiyon Yerli geliştiricinin cephaneliğinde güçlü bir araçtır, aksi takdirde bu kılavuzda belirtilen kalıpları takip etmek - Java/Kotlin veya Swift/Objective-C, dikkatli bir iplik yönetimi ve titiz testler için bilgi edinmek - aksi takdirde mümkün olan gelişmiş özellikleri sunma yeteneğidir.Bu kılavuzda belirtilen hataları takip ederek - Java/Kotlin veya Swift/Objective-C bilgi edinmek için Promises ve olayları kullanarak, iyi bir iletişim kurmak ve en iyi uygulamaları kullanarak, izinler ve performans hakkında yorum yapmak için taahhüt edebilirsiniz - siz de emin olabilirsiniz.
Küçük başlayın: platformun anlayışını derinleştirir ve sizi daha çok yönlü bir mobil geliştirici yapar. Daha sonra bir batarya seviyesi göstergesi veya özel bir görüntü filtresi gibi karmaşık modüllere mezun olun.