ReactNative Navigasyon Temelleri 1.

Arkadaşlar öncelikle bu notlar kendi kendime konuyu öğrenmek için ve daha sonra bir şeyde takılırsam dönüp bakmak için almış olduğum notlar yazım hatalarım vs olabilir lütfen dikkate almayın.

Ekranlar arasında gezinme

Geliştirdiğimiz yazılımın mobil bir uygulama olarak değil bir web projesi olsaydı, şöyle bir şey yazabilirdik:

<a href="details.html">Go to Details</a>

<a onClick={() => {window.location.href = 'details.html';}}>
  Go to Details
</a>

Normal şartlarda React için ise props yollarken ek olarak navigation isimli bir değişkende yollanmış oluyor React Native kullanırken ise props yardımı ile sayfalar arası geçiş yapabiliyoruz.
Örnek olarak.

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

Yukarıda bir View içine bir adet button eklendiğini eklenen bu butona tıklandığı zaman detay sayfasına geçişin nasıl yapıldığı gösterilmiş. Bu sayfalama sistemi ise Navigation tipine göre Screenler ile belirleniyor.

Önemli :

• navigation.navigate(‘HomeDetails’) => çalışma mantığı şu sayfaya git ama o eğer ben o sayadaysam hiçbir şey yapma !

function Home({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('HomeDetails')}
      />
    </View>
  );
}
function HomeDetails({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('HomeDetails')}
      />
    </View>
  );
}

Burada konuyu söyle hikayelendirelim.

Yukarıda eklemiş olduğum örneği inceleyelim .
Home diye bir sayfadayız bu sayfanının içinde bir adet buton var ve bu Buton’a tıkladığımız zaman HomeDetails isimli bir sayfaya gönderiyor bizi.
Bu home Details’in içinde aynı zamanda tekrar bir buton var ve bu buton bizim için tekrardan HomeDetails sayfasına göndermek için ayarlanmış.
Simdi Home ekranında butona bastığımız zaman HomeDetails sayfasına geçiş yaptığımızı düşünelim .
HomeDetails sayfasında tekrar butona basarsak ne olur ?
Hiçbir şey !

• navigation.push(‘HomeDetails’) => Burada bulunan push methodu ilerleyen konularda bunu daha iyi anlayacağız . Detay sayfasında isek bile yeniden Detay sayfasına erişmemizi sağlıyor. Genelde push methodu kullanılırken parametreler ile beraber datalarda gönderiliyor.

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

Döküman içinde çok basit bir analtım yapmışlar aslında bu konu ile iligi push her çağrıldığında stack içine yeni bir route eklendiğini daha önce bu rota oluşturulmuş mu kontrol bile edilmediği söyleniyor.
Navigate her çağrıldığında ise daha önce stack içinde bu route varmı kontrol edip yoksa stack içine eklendiği söyleniyor.

• navigation.goBack() => bir önceki sayfaya dönmek için kullanılıyor.
• navigation.popToTop() => Direkt stack içide olan ilk sayfaya dönüyor.navigasyon

Stack Navigator kullanıyorsanız

replace— mevcut rotayı yenisiyle değiştirin
push— yığına yeni bir rota itin
pop— yığına geri dön
popToTop— yığının en üstüne git

Tab Navigator yapısı kullanıyorsanız:
jumpTo— sekme gezgininde belirli bir ekrana git

Drawer için ise, aşağıdakiler de kullanılabilir:
jumpTo— çekmece gezgininde belirli bir ekrana git
openDrawer— çekmeceyi aç
closeDrawer— çekmeceyi kapat
toggleDrawer— durumu değiştir, yani. kapalıdan açık duruma geçiş ve tam tersi

Router kullanarak parametre geçme.

navigation.navigate(‘RouteName’, { /* params go here */ }

Route yaparken eğer parametre’de eklemek istersek yukarıda görmüş olduğunuz gibi yapı kullanabiliriz. ve bu yolladığımız değerlere erişmek için ise route.params fonksiyonunu kullanabiliriz.

Şimdi bir örnek üzerinden inceleyelim bu konuyu öncelikle bizim 2 adet objemiz olsun.

//Bu Stack'in ilk elamanından Detay sayfasına gidecek olan obje

let FirstObj= {
  itemId: 86,
  otherParam: {name: 'Kubilay'},
}

//Detay sayfasından diğer detay sayfalarına gidecek olan obje

let SecondObj = {
  itemId: Math.floor(Math.random() * 100),
  otherParam: {name: 'Ali' + Math.floor(Math.random() * 100)},
};

Şimdi iki adet Sayfa tasarlayalım birinci sayfamız HomeScreen ve diğer sayfamız ise Detay sayfası ;

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', FirstObj);
        }}
      />
    </View>
  );
}

function DetailsScreen({route, navigation}) {
  /* 2. Get the param */
  const {itemId, otherParam} = route.params;
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details', {  
itemId: Math.floor(Math.random() * 100),
otherParam: {name: 'Ali' + Math.floor(Math.random() * 100)},)}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator();
//Stack navigation
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Gördüğünüz gibi Detay sayfasına navigation ile beraber data yollamak için önce gidilecek olan sayfanın adını tanımladık daha sonra gönderilecek olan değerleri tanımladık.

navigation.navigate('Details', FirstObj);

Şimdi önce sonuca bakalım. İki farklı sonuç göstermek istiyorum birincisi navigation.push ile yapılmış bir diğeri ise navigation.navigate olarak geliştirilmiştir burada bir önceki konumuz olan fonksiyonlarda bahsettiğim konuyu aşağıda olan görseller ile daha net anlayabilirsiniz.

navigation.push

navigation.navigate

Şimdiye kadar bahsettiklerimiz tamamen en basit özellikleriyle parametre göndermek ile ilgiliydi şimdi biraz daha derinlere inelim bu konu hakkında.

Updating params(parametreleri update etmek)

navigation.setParams({
 query: ‘someText’,
});

Yukarıda en basit şekilde kullanımından bahsedilen setParams fonksiyonu o an aktif olan sayfanın parametre değerlerini değiştirmemize yardımcı olmaktadır.
Örnek olarak

function DetailsScreen({route, navigation}) {
  /* 2. Get the param */
  const {itemId, otherParam} = route.params;
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.navigate('Details', {
            itemId: Math.floor(Math.random() * 100),
            otherParam: {name: 'Ali' + Math.floor(Math.random() * 100)},
          })
        }
      />
      <Button title="Go to Home" onPress={() => navigation.push('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Update"
        onPress={() =>
          navigation.setParams({
            otherParam: {name: 'BzkStore' + Math.floor(Math.random() * 100)},
          })
        }
      />
    </View>
  );
}

Burada push yada navigate kullanmak hiçbir fark oluşturmuyor sadece o an aktif olan sayfada bulunan değerleri değiştirmek için kullanılan fonksiyon.

Daha Fazlası için : https://reactnavigation.org/docs/navigation-prop/#setparams

Initial params

İnitial valuları atamak için ,değerler Screen altından gönderilir.

<Stack.Screen
 name=”Details”
 component={DetailsScreen}
 initialParams={{ itemId: 42 }}
/>​

Bir önceki ekrana değer yollama

ReactNavigation kullanarak bir önceki ekrana değer yollayabiliriz aslında bunu bir web sayfasında Modal kullanarak veri alma gibi düşünebilirsiniz eğer kullanıcıdan bir veri almanız gerekiyor ise ilk tercihiniz genelde bir modal açıp state ile bu veriyi kullanıcıdan alarak ekrana yazdırmak ilk tercihlerimiz arasında olur. Fikir aslında tamamen aynı fakat burada modal değil ekran yapısı kullanacağız.

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Veri Oluştur"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Veri: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="Gönderilecek veri ne olsun?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Veriyi Yolla"
        onPress={() => {
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

Yukarıda görmüş olduğunuz iki adet comp. için söyle bir senaryo düşünelim . Veri oluştur düğmesi olan bir ekranınız olduğunu varsayalım ve Veri oluştur düğmesi kullanıcıdan veri almak için uygulamamızı yeni bir ekrana route ettirdiğimizi düşünelim . Gönderiyi oluşturduktan sonra, gönderiye ilişkin verileri önceki ekrana geri geçirmek isteyelim.
Burada şöyle ufak bir trick kullanacağız GoBack fonksiyonu gibi çalışan bir Navigate fonksiyonu kullanacağız bu sayede veriyi geriye göndermiş olabileceğiz.

Bir sonraki yazımda ReactNavigation ile ilgili daha fazla detaya inerek elimden geldiği kadarıyla konuları anlatmaya çalışacağım tekrar söylemek istiyorum içerikler önceden kendi kendime aldığım notları paylaşmak amacı ile oluşturuyorum bundan dolayı yazım yanlışlarım vs olabilir lütfen mazur görün.