Alumise vahelehe navigaatori kujundamine äärise raadiusega funktsioonis React Navigation

Alumise vahelehe navigaatori kohandamine rakenduses React Native

React Navigation 0.7x funktsiooniga "createBottomTabNavigator" töötades püüavad arendajad sageli oma rakenduste visuaalset atraktiivsust tõsta. Üks levinud kohandamine on äärise raadiuse rakendamine alumise vahelehe navigaatorile. Kuid see võib mõnikord jätta soovimatud ruumid, mis ei sobi üldise disainiga.

Selles artiklis uurime, kuidas neid disainiprobleeme lahendada, muutes äärise raadiuse ülejäänud tühikud valgeks. See lahendus tagab teie React Native'i rakendusele sujuva ja viimistletud välimuse, parandades kasutajakogemust ja liidese järjepidevust.

Alumise vahelehe navigaatori täiustamine piirderaadiusega

Pakutud skriptides käsitleme React Navigation 0,7x alumise vahelehe navigaatori kohandamist, rakendades äärise raadiust ja tagades, et äärise raadiuse jäetud tühikud on valged. Peamised kaasatud komponendid on **createBottomTabNavigator** ja **NavigationContainer**. Funktsioon **createBottomTabNavigator** seadistab vahekaartide navigaatori, mis võimaldab kasutajatel rakenduses erinevate ekraanide vahel lülituda. **NavigationContainer** kapseldab navigaatori ja pakub navigeerimispuu jaoks vajaliku konteksti. Funktsiooni **screenOptions** abil saame kohandada vahekaardiriba välimust, sealhulgas selle asukohta, taustavärvi ja äärise raadiust.

Atribuuti **tabBarStyle** kasutatakse vahekaardiriba stiili määratlemiseks. Peamised atribuudid on **positsioon**, **taustavärv**, **borderRadius** ja **shadowColor**. Meetodit **StyleSheet.create** kasutatakse laaditabeliobjekti loomiseks, mis tagab komponentide ühtse stiili. Piiriraadiusest jäetud tühikute probleemi lahendamiseks kasutame atribuute, nagu **borderWidth** ja **borderColor**, et määrata ääris valgeks, tagades sujuva välimuse. Atribuudid **shadowOffset**, **shadowOpacity** ja **elevation** suurendavad vahekaardiriba sügavust ja visuaalset efekti, kusjuures **kõrgus** on Androidi jaoks sügavustunde loomisel eriti oluline.

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

Täiustatud tehnikad alumise vahelehe navigaatori kujundamiseks

Lisaks React Navigationi alumise vahelehe navigaatori põhilisele stiilile võivad täiustatud tehnikad kasutajaliidest veelgi täiustada. Üks selline meetod on kohandatud ikoonide integreerimine igale vahekaardile. Kasutades teeke, nagu **react-native-vector-icons**, saate lisada skaleeritavaid vektorikoone, mis vastavad teie rakenduse teemale. See hõlmab komponendi **Icon** importimist teegist ja selle seadistamist **screenOptions**-s tabBarIconiks. Ikoonide kohandamisega pakute kasutajatele visuaalselt atraktiivsemat ja intuitiivsemat navigeerimiskogemust.

Veel üks aspekt, mida tuleb arvestada, on aktiivsel vahekaardil põhineva tingimusliku stiili kasutamine. Kasutades **tabBarOptions** atribuuti **focused**, saate selle esiletõstmiseks dünaamiliselt muuta aktiivse vahelehe stiili. Näiteks saate kohandada **tabBarLabelStyle** ja **tabBarIcon**, et muuta vahekaardi valimisel värve või suurusi. See tehnika suurendab kasutajate tagasisidet ja muudab navigeerimise intuitiivsemaks. Lisaks võib alumise lehe või modaali rakendamine vahekaardil pakkuda rikkalikumat kasutuskogemust, võimaldades üksikasjalikumat suhtlust ühel vahekaardil.

Viimased mõtted alumise vahekaardi navigaatori kohandamise kohta

Alumise vahelehe navigaatori edukas kujundamine React Navigationis nõuab hoolikat tähelepanu detailidele. Sobivaid omadusi ja meetodeid kasutades saate luua sujuva ja visuaalselt atraktiivse navigeerimiskogemuse. Piiri raadiuse reguleerimine ja jäetud tühikute haldamine võib oluliselt parandada rakenduse esteetikat ja kasutatavust, muutes selle kasutajate jaoks köitvamaks.