@kodkafasi 2 saat önce

React Native Bridge Hataları: Native Modül Bağlantısını Düzeltme

React Native'de JavaScript ile native kod arasındaki köprü (bridge) bağlantısı koptuğunda uygulamanız çöker. Genellikle modül kaydı eksikliği, yanlış paket adı veya build dosyalarının senkronizasyon sorunu nedeniyle olur.

En yaygın hata şu şekilde görünür: `NativeModules.YourModule is undefined`. Bu, native tarafta yazılan modülün JavaScript tarafına düzgün expose edilmediği anlamına gelir.

Android tarafında Native Modül Kurulumu

Android'de bir native modül oluşturmak için önce ReactPackage'ı implement eden bir sınıf yazmalısınız:

1// MyCustomModule.java
2package com.example.myapp;
3
4import com.facebook.react.bridge.ReactApplicationContext;
5import com.facebook.react.bridge.ReactContextBaseJavaModule;
6import com.facebook.react.bridge.ReactMethod;
7import com.facebook.react.bridge.Promise;
8
9public class MyCustomModule extends ReactContextBaseJavaModule {
10public MyCustomModule(ReactApplicationContext reactContext) {
11super(reactContext);
12}
13
14@Override
15public String getName() {
16return "MyCustomModule";
17}
18
19@ReactMethod
20public void greet(String name, Promise promise) {
21try {
22String result = "Merhaba, " + name + "!";
23promise.resolve(result);
24} catch (Exception e) {
25promise.reject("Error", e);
26}
27}
28}

Sonra bu modülü ReactPackage aracılığıyla kaydetmelisiniz:

1// MyPackage.java
2package com.example.myapp;
3
4import com.facebook.react.ReactPackage;
5import com.facebook.react.bridge.NativeModule;
6import com.facebook.react.bridge.ReactApplicationContext;
7import com.facebook.react.uimanager.ViewManager;
8import java.util.ArrayList;
9import java.util.Collections;
10import java.util.List;
11
12public class MyPackage implements ReactPackage {
13@Override
14public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
15List<NativeModule> modules = new ArrayList<>();
16modules.add(new MyCustomModule(reactContext));
17return modules;
18}
19
20@Override
21public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
22return Collections.emptyList();
23}
24}

Sonra `MainApplication.java` dosyasında bu paketi kaydetmeyi unutmayın:

[cod]
// MainApplication.java içinde getPackages() metodunu düzenle
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyPackage() // Buraya ekle
);
}
[/kod]

JavaScript Tarafında Kullanım

Artık modülü çağırabilirsiniz:

1import { NativeModules } from 'react-native';
2
3const { MyCustomModule } = NativeModules;
4
5MyCustomModule.greet('Ahmet').then(result => {
6console.log(result); // Merhaba, Ahmet!
7});

Sık Hatalar ve Çözümleri

Eğer hala `undefined` hatası alıyorsanız, build dosyalarını temizleyin:

1cd android./gradlew clean
2cd..
3react-native run-android

Package adının (com.example.myapp) `AndroidManifest.xml` ve `build.gradle` dosyalarında tutarlı olup olmadığını kontrol edin. Native modülün `getName()` metodunun döndürdüğü string, JavaScript tarafında `NativeModules` içinde aradığınız isimle eşleşmelidir. Modülü kaydettikten sonra app'i rebuild etmeden çalıştırmaya çalışmak da yaygın bir hata, her zaman native tarafta değişiklik yaptıktan sonra rebuild edin.

React Native Bridge Hataları: Native Modül Bağlantısını Düzeltme

İlgili İçerikler

Android'de Thread Safety Hatası Yaptım ve Uygulamam Çöktü

Flutter vs React Native: Hız Konusunda Gerçek Ne?

Dependency Injection'da Hilt Hype'ı: Manual DI Neden Hâlâ Geçerli

Kotlin Flow vs LiveData: Neden Flow'u Tercih Ediyorum

0 yorum