06.06. React Navigation: Tab Navigation

Tab Navigation mobil programlama çok kullanılan ekranın altında görülen bir navigasyon şeklidir. React Navigation’ın Tab Navigation özelliği ister ekranın üst veya alt kısmında çalışabilir. Bu bölüm Tag Navigation örneklerine ayrılmıştır.

Önceki örneklerde ekran ekran gidilmişti ve navigasyon işlemi için ufak bir yapı kurulmuştu. Bu tür yapılar kurmanızı öneririm. Bu bölümde ben büyük resmi daha iyi görebilmeniz için tüm örnekleri App.js dosyası içinde toplayacağım. İki adet basit bileşen tanımlayıp bunlar için bir alt tab oluşturacağım.

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

import React from 'react';

import { Text, View } from 'react-native';

import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {

render() {

return (

</View>

);

}

class SettingsScreen extends React.Component {

render() {

return (

<Text>Settings!</Text>

</View>

);

}

const TabNavigator = createBottomTabNavigator({

Home: { screen: HomeScreen },

Settings: { screen: SettingsScreen },

});

export default createAppContainer(TabNavigator);

createBottomTabNavigator alt kısma tab oluşturmak için kullanılır.

Örnekte olduğu gibi Yazılar yerine İkonlar kullanma sıklıkla başvurulan bir yoldur. İkon kullanım örneği size bırakıyorum, örnek için tıklayın. Bu örnekte resimleri manuel yüklemek yerine bir kütüphanenin resimlerini kullanıyoruz. Genelde tercih edilen bir yöntemdir, hatta expo ile kurulum yaparsanız otomatik olarak yüklenir.