React Native Bridging: Native Modülde Callback Fonksiyonu Düzeltme

React Native uygulamanız native kod çalıştırması gerektiğinde, callback fonksiyonlarıyla veri geri almak zorunlu hale gelir. Ancak callback'ler yanlış şekilde tanımlanırsa "undefined is not a function" hatası alırsınız.

Sorun genellikle native tarafta callback'i düzgün şekilde çağırmamaktan veya JavaScript tarafında Promise yerine callback kullanmaya çalışmaktan kaynaklanır.

JavaScript Tarafı (App.js):

1import { NativeModules } from 'react-native';
2const { MyNativeModule } = NativeModules;
3
4const handleNativeCall = async () => {
5try {
6const result = await MyNativeModule.doSomething('test data');
7console.log('Sonuç:', result);
8} catch (error) {
9console.error('Hata:', error.message);
10}
11};

Android Native Tarafı (MyNativeModule.java):

Reklam · TEST
AdSense Test ReklamıYazı arası (gönderi içi) · Yazı arası
1package com.example.myapp;
2
3import com.facebook.react.bridge.NativeModule;
4import com.facebook.react.bridge.ReactApplicationContext;
5import com.facebook.react.bridge.ReactContext;
6import com.facebook.react.bridge.ReactMethod;
7import com.facebook.react.bridge.Promise;
8
9public class MyNativeModule extends ReactContextBaseJavaModule {
10MyNativeModule(ReactApplicationContext context) {
11super(context);
12}
13
14@Override
15public String getName() {
16return "MyNativeModule";
17}
18
19@ReactMethod
20public void doSomething(String input, Promise promise) {
21try {
22// Native işlem yap
23String result = "İşlem tamamlandı: " + input;
24promise.resolve(result);
25} catch (Exception e) {
26promise.reject("ERROR", e.getMessage());
27}
28}
29}

iOS Native Tarafı (MyNativeModule.m):

1#import <React/RCTBridgeModule.h>
2
3@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)
4RCT_EXTERN_METHOD(doSomething:(NSString *)input withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)
5@end
6
7@implementation MyNativeModule
8- (void)doSomething:(NSString *)input withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject {
9@try {
10NSString *result = [NSString stringWithFormat:@"İşlem tamamlandı: %@", input];
11resolve(result);
12} @catch (NSException *exception) {
13reject(@"ERROR", exception.reason, nil);
14}
15}
16@end

Beklenen Çıktı:

1Sonuç: İşlem tamamlandı: test data

Sık Yapılan Hatalar:
- Callback yerine Promise kullanmamak
- Native tarafta promise.resolve() çağırmamak
- Method signature'da Promise parametresini unutmak
- Try-catch içinde resolve/reject çağırmamak

bknz: Flutter vs React Native: Maliyet Gerçeği Proje Ortasında Ortaya Çıkıyor

Reklam · TEST
AdSense Test ReklamıGönderi altı · Görüntülü
konu hakkında tepkinizi verebilirsiniz