[[oktatas:telefon:react_native:navigacio|< Navigáció]]

====== Expo - Material Top Tabs ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

Webhely:
  * https://reactnavigation.org/docs/material-top-tab-navigator/ (2024)
===== Projekt létrehozása =====

  npx create-expo-app app01

  cd app01

  npx expo install react-dom react-native-web @expo/webpack-config

===== Függőség telepítése =====

  npm install @react-navigation/material-top-tabs react-native-tab-view

Expo esetén szükséges még:
  npx expo install react-native-pager-view

===== Egyszerű példa =====


<code javascript App.js>
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

function HomeScreen() {
  return (
    <View style={{ 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center' 
      }}>
      <Text>Főoldal</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ 
      flex: 1, 
      justifyContent: 'center', 
      alignItems: 'center' 
      }}>
      <Text>Beállítások</Text>
    </View>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Főoldal" 
          component={HomeScreen} />
        <Tab.Screen name="Beállítások" 
          component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

</code>

===== Fejrész =====

<code javascript>
<Tab.Navigator screenOptions={{
  tabBarLabelStyle: { color: 'white' },
  tabBarStyle: { backgroundColor: 'powderblue' }
}}>
</code>