“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
|
1 |
react-native init ProjectName |
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.
|
1 |
npm install --save react-native-webview |
React-navigation 5.0 için aşağıdaki komutları kullanın.
İlk olarak, react-navigasyonu için aşağıdaki library’i kurun.
|
1 2 3 |
npm install @react-navigation/native Ardından aşağıdaki komutu kullanarak destekleyici libraryleri kurun |
|
1 |
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view |
3. WebViewScreen.js oluşturun
Bu ekranı birden çok kez kullanabilmemiz için WebViewScreen.js için ayrı ekran etkinliği oluşturacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { Component } from "react"; import { WebView } from "react-native-webview"; //<---Import this dependency export default class WebViewScreen extends Component { constructor(props) { super(props); console.log(props.route.params); this.state = { url: props.route.params.url }; } render() { return <WebView source={{ uri: this.state.url }} />; //<---Pass url to webview } } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const { navigation } = props; React.useLayoutEffect(() => { navigation.setOptions({ headerRight: () => ( <TouchableOpacity onPress={() => navigation.navigate("WebViewScreen", { //<--- Call WebViewScreen and Pass URL url: "https://smality.com" }) } > <Text style={{ color: "#FFFFFF", paddingHorizontal: 15 }}> Open WebView screen </Text> </TouchableOpacity> ) }); }, [navigation]); |
5. App.js
React-navigation 5.0’da NavigationContainer’ı Kullanarak Ekranları tanımladığım App.js’mi ve createStackNavigator’ı kontrol edin.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import * as React from "react"; import { Text, View, Button } from "react-native"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import Home from "../screens/Home"; import WebViewScreen from "../screens/WebViewScreen"; const Stack = createStackNavigator(); function MainStackNavigator() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home" screenOptions={{ gestureEnabled: true, headerStyle: { backgroundColor: "#3e78f4" }, headerTitleStyle: { fontWeight: "bold" }, headerTintColor: "#FFFFFF" }} > <Stack.Screen name="Home" component={Home} options={{ title: "Home Screen" }} /> <Stack.Screen name="WebViewScreen" component={WebViewScreen} options={{ title: "React-native WebView" }} /> </Stack.Navigator> </NavigationContainer> ); } export default MainStackNavigator; |
Ekran Görüntüsü
Kaynak: https://www.techup.co.in/react-native-webview-example/
Henüz yorum yapılmamış, sesinizi aşağıya ekleyin!