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.

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ē.

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.