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