React Native'de Tab Navigation Kullanımı

“React Native ile Mobil Uygulama Geliştirme” başlıklı makalelerimizden bir yenisini daha sizlerle paylaşmak istiyorum. Bu makale, bir dizi makaleden oluşacak olan serisinin 8. kısmıdır. Bir önceki makalede (Part 7), React Native’de kullanılan en iyi 10 kütüphaneleri ve mobil projelerimizde nasıl kullanacağımızı anlattım.

React Native’de Tab Navigation Kullanımı ve mobil projelerimizde nasıl kullanacağımızı öğreneceğiz.

Daha önceki makaleleri okumadıysanız, lütfen buradan başlayın.

Muhtemelen mobil uygulamalarda en yaygın gezinme tarzı sekme tabanlı gezinmedir. Mobil uygulamalarının ekranlarının altındaki veya üstteki başlığın altında (veya hatta bir başlık yerine) sekmeler olabilir.

Bu yazımızda Tab Navigation kullanmak için createBottomTabNavigator’ı kapsar. Ayrıca, uygulamanıza sekmeler eklemek için createMaterialBottomTabNavigator ve createMaterialTopTabNavigator’ı da kullanabilirsiniz.

Devam etmeden önce ilk olarak @ react-navigation/bottom-tabs yükleyin:

npm

npm install @react-navigation/bottom-tabs

Yarn

yarn add @react-navigation/bottom-tabs

Tab Navigation Kullanımı Örneği

import * as React from 'react';

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

import { NavigationContainer } from '@react-navigation/native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {

return (

</View>

);

}

function SettingsScreen() {

return (

<Text>Settings!</Text>

</View>

);

}

const Tab = createBottomTabNavigator();

export default function App() {

return (

<Tab.Navigator>

<Tab.Screen name="Home" component={HomeScreen} />

<Tab.Screen name="Settings" component={SettingsScreen} />

</Tab.Navigator>

</NavigationContainer>

);

}

Ekran Görüntüsü:

Görünümü Özelleştirme

// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

// You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or

// react-native-vector-icons/Ionicons otherwise.

import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

export default function App() {

return (

<Tab.Navigator

screenOptions={({ route }) => ({

tabBarIcon: ({ focused, color, size }) => {

let iconName;

if (route.name === 'Home') {

iconName = focused

? 'ios-information-circle'

: 'ios-information-circle-outline';

} else if (route.name === 'Settings') {

iconName = focused ? 'ios-list-box' : 'ios-list';

}

// You can return any component that you like here!

return <Ionicons name={iconName} size={size} color={color} />;

})}

tabBarOptions={{

activeTintColor: 'tomato',

inactiveTintColor: 'gray',

}}

<Tab.Screen name="Home" component={HomeScreen} />

<Tab.Screen name="Settings" component={SettingsScreen} />

</Tab.Navigator>

</NavigationContainer>

);

}

Bunu inceleyelim:

tabBarIcon, alt sekme gezgininde desteklenen bir seçenektir. Bu nedenle, onu options prop’undaki ekran bileşenlerimizde kullanabileceğimizi biliyoruz, ancak bu durumda, kolaylık sağlamak için simge yapılandırmasını merkezileştirmek için Tab.Navigator’ın screenOptions prop’una koymayı seçtik.
tabBarIcon, odaklanmış durum, renk ve boyut parametreleri verilen bir işlevdir. Yapılandırmada daha aşağıya bir göz atarsanız, tabBarOptions ve activeTintColor ve inactiveTintColor görürsünüz. Bunlar varsayılan olarak iOS platformu varsayılanlarıdır, ancak bunları buradan değiştirebilirsiniz. TabBarIcon’a aktarılan renk, odaklanan duruma bağlı olarak aktif veya pasif olandır (odaklanma etkindir). Boyut, sekme çubuğunun beklediği simgenin boyutudur.
CreateBottomTabNavigator yapılandırma seçenekleri hakkında daha fazla bilgi için tam API referansını okuyun.

Simgelere rozetler ekleyin

Bazen bazı simgelere rozetler eklemek isteriz. Bunu yapmak için tabBarBadge seçeneğini kullanabilirsiniz:

1	<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />

UI açısından bu bileşen kullanıma hazırdır, ancak yine de React Context, Redux, MobX veya etkinlik yayıcıları kullanmak gibi rozet sayısını başka bir yerden düzgün bir şekilde geçirmenin bir yolunu bulmanız gerekir.

Lütfen bize görüşlerinizi bildirmekten çekinmeyin.

React Native ile Mobil Uygulama Geliştirme – 8 – React Native’de Tab Navigation Kullanımı