React Native ile Mobil Uygulama Geliştirme – 14 – WebView Oluşturma

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 14. kısmıdır. Bir önceki makalede (Part 13), React Native’de Multi-Step Form oluşturmayı ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de web sitelerimizi webview ile  göstermeyi ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Bu yazıda React Native WebView ile web sitenizin görünümünü Ios ve Android uygulamanızda gösterebilmeyi anlatacağım. Web sitenizin URL’sini kullanarak bu işlemi yapacağımızdan, sitenizdeki herhangi bir değişiklik uygulamanıza anında yansıyacaktır.

1. Yeni bir proje oluşturun

2. Aşağıdaki bağımlılıkları yükleyin
Navigasyon ve react-native web görünümü için iki bağımlılık eklemeliyiz, navigasyon için en son react-navigasyon 5.0’ı kullanıyoruz. React-navigation 5.0 hakkında daha fazla bilgi edinmek için bu linke bakın. React-native-webview yüklemek için aşağıdaki komutu kullanın.

React-navigation 5.0 için aşağıdaki komutları kullanın.

İlk olarak, react-navigasyonu için aşağıdaki library’i kurun.

3. WebViewScreen.js oluşturun
Bu ekranı birden çok kez kullanabilmemiz için WebViewScreen.js için ayrı ekran etkinliği oluşturacağız.

Yapıcıdaki yukarıdaki ekranda, önceki ekrandan geçiş olan görünen URL’yi alıp durum değişkenine kaydedeceğiz ve yukarıdaki kodu gördüğümüz gibi kaynağa atlayarak web görünümünü görüntülemek için bu URL’yi kullanacağız.

4. WebView ekranını çağırma
Bu örnekte, aşağıdaki gibi Home.js eylem çubuğundan webViewScreen’i çağırıyorum

5. App.js
React-navigation 5.0’da NavigationContainer’ı Kullanarak Ekranları tanımladığım App.js’mi ve createStackNavigator’ı kontrol edin.

Ekran Görüntüsü

Kaynak: https://www.techup.co.in/react-native-webview-example/

Tavsiye Edilen Yazılar

Henüz yorum yapılmamış, sesinizi aşağıya ekleyin!


Bir Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir