React Native, hem iOS hem de Android platformlarında kullanılabilen bir çerçeve olarak, geliştiricilere tek bir kod tabanı üzerinden birden fazla platforma uygulama geliştirme imkanı sunar. Bu avantaj, uygulama geliştirme sürecini hızlandırır ve maliyetleri düşürmeye yardımcı olur. Ancak, bazen React Native'in sunduğu bileşenlerle istenen işlevselliği sağlamak mümkün olmayabilir. İşte bu noktada, React Native Native Modules ve Bridge yapısı devreye girer.
React Native Native Modules, React Native'in JavaScript koduyla doğrudan etkileşimde bulunmak için kullanılan bir yapıdır. Bu modüller, platforma özgü kodları barındıran birer köprü görevi görür ve geliştiricilere platform özelliklerine erişme ve doğrudan kendi yazdıkları native kodları kullanma imkanı sunar. Örneğin, kamera işlevselliği gibi platforma özgü bir özelliği kullanmak istediğinizde, React Native Native Modules kullanarak bu özelliği JavaScript kodunuzla entegre edebilirsiniz.
React Native'in Native Modules yapısı, JavaScript kodunun Native kodla iletişim kurmasını sağlayan bir köprü olarak görev yapar. Bu köprü, iki yönlü bir iletişim sağlar ve JavaScript tarafından native kodun çağırılmasını ve native kodun JavaScript tarafına geri dönüş yapmasını sağlar. Bu, uygulama performansını artırırken aynı zamanda platforma özgü özellikleri kullanabilme esnekliği sunar. React Native Native Modules, yazılım geliştiricilerine daha geniş bir yetenek ve kontrol sağlayarak mobil uygulama geliştirme sürecini daha güçlü hale getirir.
React Native Native Modules oluşturmak için öncelikle JavaScript tarafında bir modül tanımlamalıyız. Örneğin, bir kamera işlevselliği sağlamak için CameraModule.js adında bir dosya oluşturabiliriz. Bu dosyada, Native kodla iletişim kurabilmek için gereken fonksiyonları ve yöntemleri tanımlayabiliriz. Örneğin:
Yukarıdaki örnekte, CameraModule.js içerisinde NativeModules kullanarak React Native'in Native Modülüne erişiyoruz. Ardından, takePhoto ve recordVideo gibi işlevleri tanımlıyoruz, bu işlevler native kod tarafına iletilerek kamera işlevselliğini sağlayacak.
Daha sonra, Native kod tarafında bu fonksiyonların uygulandığı bir modül oluşturmalıyız. Örneğin, Android için CameraModule.java dosyası oluşturarak takePhoto ve recordVideo gibi işlevleri içeren bir sınıf tanımlayabiliriz:
Yukarıdaki örnekte, CameraModule.java içerisinde Android tarafında kamera işlevselliğini sağlamak için gerekli olan takePhoto ve recordVideo metotlarını tanımlıyoruz. Bu metotlar, çağrıldıklarında kamera ile ilgili işlemleri gerçekleştirecek kodları içermelidir.
Yukarıdaki örnekte, CameraModule.swift dosyasında, kamera işlevselliğini sağlamak için gerekli olan takePhoto ve recordVideo metodlarını tanımlıyoruz. Bu metodlar, çağrıldıklarında kamera ile ilgili işlemleri gerçekleştirecek Swift kodlarını içermelidir.
React Native Bridge Yapısı:
React Native Native Modules yapısını kullanırken, Bridge yapısı JavaScript kodunun Native kodla iletişim kurmasını sağlar. Bu köprü, veri türlerini dönüştürme ve iki yönlü iletişimi yönetir. Örneğin, JavaScript tarafından bir fonksiyon çağrıldığında, Bridge bu çağrıyı Native tarafına iletir ve Native tarafından dönen sonuçları JavaScript'e geri döndürür. Bu iletişim süreci, React Native'in performansını optimize etmek ve platforma özgü işlemleri etkin bir şekilde gerçekleştirmek için oldukça önemlidir.
React Native Native Modules ve Bridge yapısını daha iyi anlamak için bir örnek inceleyelim. Örneğin, bir adım sayacı uygulaması yapmak istediğinizi düşünelim. JavaScript tarafından çağrılan bir increment() fonksiyonu, Native tarafında kaydedilen adım sayısını artıracaktır. Ardından, getCount() fonksiyonu, Native tarafında kaydedilen adım sayısını JavaScript'e geri döndürecektir.
Java tarafında bir Native Module oluşturalım:
Şimdi ise Swift tarafında benzer bir modül oluşturalım.
Yukarıdaki örnek kodlarda, StepCounter adında bir Native Module oluşturduk. increment() fonksiyonu adım sayısını artıracak ve getCount() fonksiyonu adım sayısını JavaScript'e geri döndürecektir.
JavaScript'teki örneği ise bu şekilde olacaktır
React Native Native Modules yapısını kullanırken, JavaScript tarafında Bridge yapısını kullanarak Native tarafındaki fonksiyonları çağırabiliriz. Örneğin, adım sayacı uygulaması senaryosunda, JavaScript tarafında bir Native Module olan StepCounter'ı kullanarak adım sayısını artırabilir ve adım sayısını alabiliriz.
JavaScript tarafında StepCounter.js adında bir dosya oluşturalım:
Bu şekilde JavaScript tarafında Bridge yapısını kullanarak Native tarafındaki fonksiyonları çağırabilir ve uygulama geliştirme sürecinde etkili bir şekilde iletişim kurabiliriz.