React Native TabNavigator

React Native ile uygulamalarından altında bulunan sayfalandırma işlemini kolaylıkla yapabilirsiniz, bu işlem için önceki makalelerde anlattığım gibi bazı tanımlamalar yapılması gerekli ancak burada işlem biraz daha basit ,

Tanımlama işlemlerine geçmeden önce react-native-tab-navigator kurulumunu sağlayalım diğer navigate nesneleride mevcut ancak kullandıklarım arasından kullanması ve tanımlaması en basit olan nesne bu idi ve sıklıklada react-native-tab-navigator kullanıyorum.

sudo npm install react-native-tab-navigator --save;

sonrasında import işlemlerimizi sağlayalım ;

import React, { Component } from 'react';
import {
  AppRegistry,
  AsyncStorage,
  StyleSheet,
  Text,
  View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/FontAwesome'
import {Dimensions} from 'react-native'

tanımlama işlemlerimizide tamamladıktan sonra ;

      <TabNavigator style={styles.container}>

        <TabNavigator.Item
          selected={this.state.selectedTab === 'home'}
          selectedTitleStyle={{color: "#3496f0"}}
          renderIcon={() => <Icon name="paper-plane" size={px2dp(22)} color="#666"/>}
          renderSelectedIcon={() => <Icon name="paper-plane" size={px2dp(22)} color="#3496f0"/>}
          
          onPress={() => this.setState({selectedTab: 'home'})}>
      
         <Home />

        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.selectedTab === 'profile'}
          selectedTitleStyle={{color: "#3496f0"}}
          //badgeText="1"
          renderIcon={() => <Icon name="shopping-bag" size={px2dp(22)} color="#666"/>}
          renderSelectedIcon={() => <Icon name="shopping-bag" size={px2dp(22)} color="#3496f0"/>}
          onPress={() => this.setState({selectedTab: 'profile'})}>

          <Profile/>

        </TabNavigator.Item>
      </TabNavigator>

bu navigationda state kullanıyoruz ve state tanımlamasını

constructor(props){
  super(props);
  this.state={
     selectedTabs:'home',
   }
}

şeklinde yapıyoruz. Tabnavigator kullanılması durumunda kullanabileceğiniz maksimum sayfa sayısı 5 i geçmemelidir, çünkü tüm yönlenme sayfalarınızı cihazın altında listeliyorsunuz ve kullanımı 5 ten sonra zorlaşmaya başlıyor, daha fazla sayfalandırma yapısı kullanmak istiyorsanız StackNavigator kullanmanızı tavsiye ederim.