Expo-React Native Link Verme ve Bir Sayfaya Yönlendirme

#expo #reactnative #linking #navigate

Linking and navigate in expo react native

Link verme ya da bir sayfaya yönlendirme bizim için proje ihtiyaçlarından biridir. Burada anasayfa üzerinde çalıştım. İsimleri keyfinize göre verin. Sayfa adınız AnasayfaScreen olsun diyelim. Stack kısmında bunları ayarladığınızı ve Iletisim ve Ayarlar sayfalarına da sahip olduğunuzu varsayalım.

Sırasıyla sayfamıza gerekli kütüphaneleri ekleyelim. Sonra Style kısımları ve anasayfa düzeni var. Const içindeki navigation olmazsa proje içindeki sayfaya gitmez. Dikkat edin. Styles kısmı ise oldukça kolay css bilgilerinize dayanır.

Önce sayfamıza gerekli kütüphaneleri ekleyelim. Hangi eklentiyi kullanıyorsanız onun tutorial kısmını ve örneklerini önce detaylıca inceleme yapın derim.

Burada linking kütüphanesi asıl kullanacağımız. Başlangıç olarak:

import React from “react”;

import { View, Button, Text, StyleSheet, Linking } from “react-native”;

const AnasayfaScreen = ({ navigation }) => {

return (

<View style={styles.center}>

<Text>Burası Anasayfa</Text>

<Button

title=”Ayarlar Sayfasına git”

onPress={() => navigation.navigate(“Ayarlar”)} />

<Button

title=”Iletisim”

onPress={() => navigation.navigate(“Iletisim”)} />

<Button title=”Deneme sayfası google açalım” onPress={ ()=>{ Linking.openURL(‘https://www.google.com.tr/')}} />

</View>

);

};

const styles = StyleSheet.create({

center: {

flex: 1,

justifyContent: “center”,

alignItems: “center”,

textAlign: “center”,

}

});

export default AnasayfaScreen;

Burada hem navigate hem de linking url örneği yapmış olduk.

iyi çalışmalar

Bilgisayar Mühendisi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store