React Native'de WebView Kullanımı - Smality Mobile Software

“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

react-native init ProjectName

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.

npm install --save react-native-webview

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.

npm install @react-navigation/native

Ardından aşağıdaki komutu kullanarak destekleyici libraryleri kurun

npm install @react-navigation/native

Ardından aşağıdaki komutu kullanarak destekleyici libraryleri kurun

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

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.

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
  }
}

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

 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]);

const { navigation } = props;

React.useLayoutEffect(() => {

navigation.setOptions({

headerRight: () => (

<TouchableOpacity

onPress={() =>

navigation.navigate("WebViewScreen", { //<--- Call WebViewScreen and Pass URL

url: "https://smality.com"

})

}

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.

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;

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 (

<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/

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

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

Bir Yorum Ekle Cevabı iptal et

KURUMSAL

HİZMETLERİMİZ

İLETİŞİM & DESTEK

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

Tavsiye Edilen Yazılar

React Native ile Mobil Uygulama Geliştirme – 18 – Detaylı Flexbox Kullanımı

React Native ile Mobil Uygulama Geliştirme – 17 – Asyncstorage ile React Native’de Redux Persist Nasıl Kullanılır?

React Native ile Mobil Uygulama Geliştirme – 16 – React Native ile Görseller Uygulamada Nasıl Yüklenir?

Bir Yorum Ekle Cevabı iptal et

KURUMSAL

HİZMETLERİMİZ

İLETİŞİM & DESTEK