README.tr.md

Kolay kullanılabilir react-native webview

🌟 Özellikler

• Kolay kullanım
• Kolay yapılandırma
• Güzel görünüm
• URL kopyalama
• Tarayıcıda açma
• Web sitesinin başlığını uygulama başlığında görme

⭐ Ekran Görüntüleri

⬇️ Kurulum

react-native-webview paketini kurun

react-native-webview paketinin detaylı kurulumu için, tıklayınız.

$ yarn add react-native-webview

or

$ npm install --save react-native-webview

@react-native-community/clipboard paketini kurun

Bu paketin detaylı kurulumunu görmek için, lütfen tıklayınız.

$ yarn add @react-native-community/clipboard

or

$ npm install --save @react-native-community/clipboard

Yukarıdaki paketlerin native bağımlılıklarını kuralım (IOS için)

@react-native-community/clipboard and @react-native-community/react-native-webview paketlerinin native bağımlılıklarını kurunuz. Eğer react-native versiyonunuz 0.60.x altında ise, paketlerin resmi dökümantasyonunu incelemelisiniz.

$ cd ios && pod install

Şimdi paketimizi kuralım

$ yarn add react-native-beauty-webview

or

$ npm install --save react-native-beauty-webview

🔦 Örnek Kullanım

import React, {useState} from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
} from 'react-native';
import BeautyWebView from './react-native-beauty-webview';

const App = () => {
  const [visible, setVisible] = useState(false);
  const onButtonPress = () => {
    setVisible(true);
  };

  return (
    <>
      <View style={styles.container}>
        <BeautyWebView
          visible={visible} // Required for open and close
          onPressClose={() => setVisible(false)} // Required for closing the modal
          url={'https://github.com/'}
          extraMenuItems={[
            {
              title: 'Extra Item',
              onPress: () => console.log('Extra Menu Item Clicked'),
            },
          ]}
        />
        <TouchableOpacity style={styles.button} onPress={onButtonPress}>
          <Text style={styles.text}>Open</Text>
        </TouchableOpacity>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  button: {
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 8,
    backgroundColor: '#2196f3',
    marginHorizontal: 20,
  },
  text: {
    color: '#fff',
    fontSize: 16,
  },
});

export default App;

📎 Yapılandırma

Parametreler	Tip	Varsayılan	Gerekli	Açıklama
visible	boolean	false	Evet	Ekranın görünürlülüğü
onPressClose	function	-	Evet	Kapatma butonuna basınca çalışır (Ekranı kapatmak için 'visible' parametresinin değerini false yapmalısınız)
url	string	-	Evet	Websitenin bağlantısı
backgroundColor	string	#fff	-	Ekranın arka plan rengi
headerContent	'dark' or 'light'	'dark'	-	Başlığın içerik rengi
headerBackground	string	#fff	-	Başlığın arka plan rengi
progressColor	string	#2196f3	-	Yüklenme çubuğunun rengi
loadingText	string	'Loading...'	-	Yüklenirken görünen yazı
copyLinkTitle	string	'Copy Link'	-	Bağlantıyı kopyalama butonu yazısı
openBrowserTitle	string	'Open on Browser'	-	Tarayıcı da açma butonunun yazısı
extraMenuItems	Array	-	-	Menüye fazladan buton eklenmek isteniyorsa kullanılır (Örneği yukarıda mevcut)
animationType	'slide' or 'fade'	'slide'	-	Ekranın açılma animasyon tipi

⚠️ Bağımlılıklar

@react-native-community/react-native-webview

Paketi kullanmadan önce @react-native-community/react-native-webview paketini kurmanız gerekir. Daha fazla bilgi için, lütfen tıklaynız.

@react-native-community/clipboard

Paketi kullanmadan önce @react-native-community/clipboard paketini kurmanız gerekir. Daha fazla bilgi için, lütfen tıklaynız.

📋 Referanslar

mxck/react-native-material-menu

Menü bileşeni için, bu paketten yararlandım. Daha fazla bilgi almak için, lütfen tıklayınız.