< Navigáció

Expo - Material Top Tabs

Szerző: Sallai András

Copyright © 2024, Sallai András

Licenc: 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

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> ); }

Fejrész

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