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;34const 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):
1package com.example.myapp;23import 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;89public class MyNativeModule extends ReactContextBaseJavaModule {10MyNativeModule(ReactApplicationContext context) {11super(context);12}1314@Override15public String getName() {16return "MyNativeModule";17}1819@ReactMethod20public void doSomething(String input, Promise promise) {21try {22// Native işlem yap23String 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>23@interface RCT_EXTERN_MODULE(MyNativeModule, NSObject)4RCT_EXTERN_METHOD(doSomething:(NSString *)input withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)5@end67@implementation MyNativeModule8- (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@endBeklenen Çıktı:
1Sonuç: İşlem tamamlandı: test dataSı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
0 yorum