React Native – Navigation

Bu kısımda kullanacağımız paket React Navigation

Kurulum için

npm install react-navigation --save

npm install react-native-reanimated react-native-gesture-handler react-native-screens --save

sürümünüz 0.60 ve üzeri ise

cd ios

pod install

cd ..

0.60 dan küçük ise

react-native link react-native-reanimated react-native link react-native-gesture-handler react-native link react-native-screens

npm install react-navigation-stack --save

Yukarıdaki komutları sırası ile proje dosyanız içinde çalıştırın.

Android cihazlarda çalışması için yapmanız gereken ufak bir değişiklik var. Projenizde klasörünüzde android/app/src/main/java/com/MainActivity.java Dosyasının içeriğini

package com.example;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {

  /**
  * Returns the name of the main component registered from JavaScript.
  * This is used to schedule rendering of the component.
  */

  @Override
  protected String getMainComponentName() {
    return "example";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

Bu değişikliği yaptıktan sonra Android için kullanmaya başlayabilirsiniz.

 

 

Örnek kullanımı aşağıdaki gibi dir. Açıklamaları kod satırında bulabilirsiniz.

 

 

 

 

import React, {Component} from 'react';
import {StyleSheet, Text, View,Button} from 'react-native';
import {  createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
export default class App extends Component {
  render() {
    return (
        <AppContainer />
    );
  }
}
class HomeScreen extends Component {
  static navigationsOptions = {
    title:'Home',
    headerRight : (
        <Button title="Sağ" />
    ),
    headerLeft : (
        <Button title="Sol" />
    )
  }
  render() {

    const { navigate } = this.props.navigation;

    return (
        <View style={styles.container}>
          <Text>Home</Text>
          <Button title="Detay 1" onPress={ () => navigate('Detail') } />
          <Button title="Detay 1" onPress={ () => navigate('Detail' , { title:'detail2' } ) } />
        </View>
    );
  }
}
class DetailScreen extends Component {
  static navigationOptions = ( { navigation } ) => {
    return {
      title: navigation.getParam('title')
    }
  };

  render() {
    const { navigate, push, goBack, getParam } = this.props.navigation;
    const title = getParam('title','Default Title');
    return (
        <View style={styles.container}>
          <Text>Detail</Text>
          <Button title={'a'} onPress={ () => push('Detail') } />
          <Button title={'b'} onPress={ () => goBack() } />
        </View>
    );
  }
}
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Detail: {
    screen: DetailScreen
  },
},{
  initialRouteName: "Home",
  headerLayoutPreset :"center",
  defaultNavigationOptions:{
    headerBackTitle: "Geri",
    headerStyle:{
      backgroundColor:'blue',

    },
    headerTintColor: '#000',
    headerTitleStyle:{
      fontWeight : 'bold'
    }
  }
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }});

 

Yukarıdaki kodu eksiksiz tamamladığımızda HomeScreen Class’ı İlk ekran olarak açılacak şekilde ayarlanmış oluyor. İlk sırada olan stack aksi belirtilmedikçe ilk ekran olur.

 

Modal açtırmak istersek aşağıdaki gibi bir yapı kullanmalıyız.

 

const ModalStack = createStackNavigator({     Main: MainStack,     AboutModal }, {     mode: 'modal',     headerMode: 'none' }); export default createAppContainer(ModalStack);

 

Yani yeni bir stack oluşturup Main Stack’i o stack içine üste gelecek şekilde dahil edip, Sonrasında modal stack ini yazacağız.

Sonrasında herhangi bir sayfadan  navigation.navigate('AboutModal')}   şeklinde modal açabiliriz.

 

Yana açılır menüler tasarlamak için aşağıdaki gibi bir yapı kullanmalıyız.

 

 

// Ekranların navigate tasarımları

const HomeStack = createStackNavigator({
    Home: {
        screen: HomeScreen
    },
    Detail: {
        screen: DetailScreen
    }
});

const ContactStack = createStackNavigator({
    Contact: {
        screen: ContactScreen
    }
});

//Yan menü kullanmak için drawerNavigator tasarımı
const Drawer = createDrawerNavigator({
    Home: {
        screen: HomeStack,// Ana ekranda görmek istediğimiz stack yapısı
        navigationOptions: {
            drawerLabel: 'Home',
            drawerIcon: ({ tintColor }) => ( // Sağa açılır menü tasarımı
                <Icon
                    name="ios-home"
                    size={22}
                    color={tintColor}
                />
            )
        }
    },
    Contact: {
        screen: ContactStack,
        navigationOptions: {
            drawerLockMode: 'locked-closed',
            drawerLabel: 'Contact',
            drawerIcon: ({ tintColor }) => ( // Contact ekranında görmek istediğiniz sağa açılır menü tasarımı
                <Icon
                    name="ios-contact"
                    size={22}
                    color={tintColor}
                />
            ),
        }
    }
}, {
    drawerPosition: 'right',//Menü sağa doğru açılsın
    drawerWidth: 160,//Menü genişliği
    contentOptions: {
        activeTintColor: '#e91e63',
        itemsContainerStyle: {
            opacity: 1
        },
        iconContainerStyle: {
            opacity: 1
        },
        itemStyle: {
            flexDirection: 'row-reverse'
        }
    }
});

export default createAppContainer(Drawer);

 

 

Tab navigator kullanmak için aşağıdaki yapı kullanılmalıdır

 

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

export default createAppContainer(TabNavigator);

 

 

Tab navigator ve Stack navigator‘ü beraber kullanmak içinde aşağıdaki gibi bir yapı kullanmalıyız.

const ContactStack = createStackNavigator({ // Stack navigatoru tasarlıyoruz
    Contacts: {
        screen: Contacts,
        navigationOptions: {
            title: 'Contacts'
        }
    },
    ContactDetail: {
        screen: ContactDetail,
        navigationOptions: {
            title: 'Contact Detail'
        }
    }
});

const TabNavigator = createBottomTabNavigator({ // Bottom Tab Navigatoru tasarlıyoruz
    Home: { // İlk sırada görünecek ekran
        screen: Home,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="ios-home" size={22} color={tintColor} />)
        }
    },
    Contacts: {
        screen: ContactStack,// Buraya Yuarıda tasarladığımız Stack navigatoru tanımlıyoruz. Tabbardan buraya bastığımızda stack navigator içindeki iki ekranıda burada kullanabileceğiz
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="ios-contacts" size={22} color={tintColor} />)
        }
    },
    Settings: {
        screen: Settings,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (<Icon name="ios-settings" size={22} color={tintColor} />)
        }
    }
}, {
    tabBarOptions: {
        activeTintColor: 'red'
    }
});