Apakšējās cilnes navigatora veidošana ar apmales rādiusu React navigācijā

Apakšējās cilnes navigatora pielāgošana programmā React Native

Strādājot ar `createBottomTabNavigator' React Navigation 0.7x, izstrādātāji bieži cenšas uzlabot savu lietojumprogrammu vizuālo pievilcību. Viena izplatīta pielāgošana ir apmales rādiusa lietošana apakšējās cilnes navigatoram. Tomēr tas dažkārt var atstāt nevēlamas vietas, kas nesaplūst ar kopējo dizainu.

Šajā rakstā mēs izpētīsim, kā risināt šīs dizaina problēmas, mainot atlikušās atstarpes no apmales rādiusa uz baltu krāsu. Šis risinājums nodrošinās jūsu React Native lietojumprogrammas vienmērīgu un noslīpētu izskatu, uzlabojot lietotāja pieredzi un saskarnes konsekvenci.

Pavēli	Apraksts
createBottomTabNavigator	Izveido apakšējās cilnes navigatoru, kas ļauj lietotājiem pārslēgties starp dažādiem lietotnes ekrāniem.
screenOptions	Ļauj pielāgot ciļņu joslu, tostarp stila un izskata īpašības.
tabBarStyle	Definē ciļņu joslas stilu, piemēram, pozīciju, fona krāsu, apmales rādiusu un ēnas īpašības.
NavigationContainer	Iekapsulē navigatoru un nodrošina navigācijas koka kontekstu.
StyleSheet.create	Izveido StyleSheet objektu, kas definē dažādus komponentu stilus, nodrošinot konsekventu stilu.
shadowOffset	Norāda ēnas nobīdi, uzlabojot komponenta dziļumu un vizuālo efektu.
elevation	Norāda komponenta z-indeksa pacēlumu, ko galvenokārt izmanto operētājsistēmā Android, lai radītu dziļuma sajūtu.

Apakšējās cilnes navigatora uzlabošana ar apmales rādiusu

Piedāvātajos skriptos mēs risinām apakšējo cilnes navigatora pielāgošanu programmā React Navigation 0,7x, piemērojot apmales rādiusu un nodrošinot, ka apmales rādiusa atstātās vietas ir baltas. Galvenie iesaistītie komponenti ir createBottomTabNavigator un NavigationContainer. Funkcija createBottomTabNavigator iestata ciļņu navigatoru, kas ļauj lietotājiem pārslēgties starp dažādiem lietotnes ekrāniem. NavigationContainer iekapsulē navigatoru un nodrošina navigācijas kokam nepieciešamo kontekstu. Izmantojot screenOptions, mēs varam pielāgot ciļņu joslas izskatu, tostarp tās pozīciju, fona krāsu un apmales rādiusu.

Rekvizīts tabBarStyle tiek izmantots, lai definētu ciļņu joslas stilu. Galvenās īpašības ir pozīcija, fona krāsa, borderRadius un shadowColor. Metode StyleSheet.create tiek izmantota, lai izveidotu stila lapas objektu, kas nodrošina konsekventu stilu visos komponentos. Lai risinātu problēmu ar atstarpēm, ko atstāj apmales rādiuss, mēs izmantojam tādus rekvizītus kā borderWidth un borderColor, lai iestatītu apmali baltā krāsā, nodrošinot vienmērīgu izskatu. Rekvizīti shadowOffset, shadowOpacity un elevation uzlabo ciļņu joslas dziļumu un vizuālo efektu, un paaugstinājums ir īpaši svarīgi Android ierīcēm, lai radītu dziļuma sajūtu.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          position: 'absolute',
          bottom: 20,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: '#ffffff',
          borderRadius: 15,
          height: 70,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 10 },
          shadowOpacity: 0.25,
          shadowRadius: 3.5,
          borderWidth: 1,
          borderColor: '#ffffff'
        }
      }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#7F5DF0',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 5
  }
});

.tabBarStyle {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  elevation: 0;
  background-color: #ffffff;
  border-radius: 15px;
  height: 70px;
  shadow-color: #000;
  shadow-offset: { width: 0, height: 10 };
  shadow-opacity: 0.25;
  shadow-radius: 3.5px;
  border-width: 1px;
  border-color: #ffffff;
}

.shadow {
  shadow-color: #7F5DF0;
  shadow-offset: { width: 0, height: 10 };
  shadow-opacity: 0.25;
  shadow-radius: 3.5px;
  elevation: 5;
}

Papildu paņēmieni apakšējās cilnes navigatora veidošanai

Papildus React Navigation apakšējās cilnes navigatora pamata stilam uzlabotas metodes var vēl vairāk uzlabot lietotāja saskarni. Viena no šādām metodēm ir pielāgotu ikonu integrēšana katrai cilnei. Izmantojot tādas bibliotēkas kā react-native-vector-icons, varat pievienot mērogojamas vektoru ikonas, kas atbilst jūsu lietojumprogrammas tēmai. Tas ietver komponenta Icon importēšanu no bibliotēkas un tā iestatīšanu kā tabBarIcon sadaļā screenOptions. Pielāgojot ikonas, jūs lietotājiem sniedzat vizuāli pievilcīgāku un intuitīvāku navigācijas pieredzi.

Vēl viens aspekts, kas jāņem vērā, ir nosacījuma stila izmantošana, pamatojoties uz aktīvo cilni. Izmantojot tabBarOptions rekvizītu focused, varat dinamiski mainīt aktīvās cilnes stilu, lai to izceltu. Piemēram, varat pielāgot tabBarLabelStyle un tabBarIcon, lai mainītu krāsas vai izmērus, kad ir atlasīta cilne. Šis paņēmiens uzlabo lietotāju atsauksmes un padara navigāciju intuitīvāku. Turklāt apakšējās lapas vai modāla ieviešana cilnē var nodrošināt bagātīgāku lietotāja pieredzi, ļaujot veikt detalizētāku mijiedarbību vienā cilnē.

1. Kā mainīt apakšējās cilnes navigatora fona krāsu?
2. Izmantojiet īpašums iekšā lai iestatītu .
3. Vai katrai cilnei varu pievienot pielāgotas ikonas?
4. Jā, importējiet komponents no un iestatiet to kā ietvaros screenOptions.
5. Kā es varu pielāgot apakšējās cilnes navigatora augstumu?
6. Iestatiet īpašums iekšā uz jūsu vēlamo vērtību.
7. Vai ir iespējams mainīt aktīvās cilnes stilu?
8. Jā, izmantojiet īpašums iekšā lai aktīvajai cilnei lietotu nosacījumu stilu.
9. Kā pievienot ēnu apakšējās cilnes navigatoram?
10. Izmantojiet tādas īpašības kā , , , un elevation ietvaros .
11. Vai es varu iestatīt apmales rādiusu apakšējās cilnes navigatoram?
12. Jā, iestatiet īpašums iekšā .
13. Kā risināt atstarpju problēmas, ko izraisa apmales rādiuss?
14. Iestatiet un īpašības, lai tās iekšpusē būtu baltas .
15. Vai es varu izmantot pielāgotus komponentus cilnē?
16. Jā, jūs varat renderēt pielāgotus komponentus, iestatot tos kā cilnes ekrāna komponentus.
17. Vai noteiktos ekrānos ir iespējams paslēpt apakšējās cilnes navigatoru?
18. Jā, izmantojiet īpašums iekšā lai nosacīti paslēptu ciļņu joslu.
19. Kā var animēt pāreju starp cilnēm?
20. Izmantojiet īpašums, lai iestatītu animācijas, piemēram, vienmērīgākām pārejām.

Pēdējās domas par apakšējās cilnes navigatora pielāgošanu

Lai sekmīgi veidotu apakšējās cilnes navigatoru React Navigation, ir rūpīgi jāpievērš uzmanība detaļām. Izmantojot atbilstošās īpašības un metodes, varat izveidot nevainojamu un vizuāli pievilcīgu navigācijas pieredzi. Pielāgojot apmales rādiusu un pārvaldot atstātās vietas, var ievērojami uzlabot lietotnes estētiku un lietojamību, padarot to lietotājus saistošāku.