Stilingas apatinio skirtuko navigatorius su kraštinės spinduliu „React“ navigacijoje

Apatinio skirtuko naršymo priemonės tinkinimas programoje „React Native“.

Dirbdami su React Navigation 0.7x „createBottomTabNavigator“, kūrėjai dažnai siekia pagerinti savo programų vizualinį patrauklumą. Vienas įprastas tinkinimas yra apatinio skirtuko navigatoriaus kraštinės spindulio taikymas. Tačiau kartais tai gali palikti nepageidaujamų erdvių, kurios nesiderina su bendru dizainu.

Šiame straipsnyje mes išnagrinėsime, kaip išspręsti šias dizaino problemas, paliekant tarpus iš kraštinės spindulio į baltą spalvą. Šis sprendimas užtikrins sklandžią ir dailę jūsų „React Native“ programos išvaizdą, pagerins vartotojo patirtį ir sąsajos nuoseklumą.

Apatinio skirtuko navigatoriaus tobulinimas naudojant kraštinės spindulį

Pateiktuose scenarijuose sprendžiame „React Navigation 0,7x“ apatinio skirtuko naršymo priemonės tinkinimą, taikydami kraštinės spindulį ir užtikrindami, kad kraštinės spindulio palikti tarpai būtų balti. Pagrindiniai komponentai yra **createBottomTabNavigator** ir **NavigationContainer**. Funkcija **createBottomTabNavigator** nustato skirtukų naršymo priemonę, kuri leidžia vartotojams perjungti skirtingus programos ekranus. **NavigationContainer** apima navigatorių ir pateikia reikiamą kontekstą navigacijos medžiui. Naudodami **screenOptions** galime tinkinti skirtukų juostos išvaizdą, įskaitant jos padėtį, fono spalvą ir kraštinės spindulį.

Ypatybė **tabBarStyle** naudojama skirtukų juostos stiliui apibrėžti. Pagrindinės savybės yra **pozicija**, **fono spalva**, **borderRadius** ir **shadowColor**. **StyleSheet.create** metodas naudojamas stilių lentelės objektui sukurti, kuris užtikrina nuoseklų visų komponentų stilių. Kad išspręstume kraštinės spindulio paliktų tarpų problemą, naudojame tokias ypatybes kaip **borderWidth** ir **borderColor**, kad nustatytume kraštinę į baltą ir užtikrintume vientisą išvaizdą. Ypatybės **shadowOffset**, **shadowOpacity** ir **elevation** padidina skirtukų juostos gylį ir vizualinį efektą, o **aukštis** yra ypač svarbus „Android“, kad būtų sukurtas gylio pojūtis.

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

Išplėstinė apatinio skirtuko navigatoriaus stiliaus kūrimo technika

Be pagrindinio „React Navigation“ apatinio skirtuko navigatoriaus stiliaus, pažangūs metodai gali dar labiau pagerinti vartotojo sąsają. Vienas iš tokių būdų yra tinkintų piktogramų integravimas kiekviename skirtuke. Naudodami tokias bibliotekas kaip **react-native-vector-icons**, galite pridėti keičiamo dydžio vektorinių piktogramų, atitinkančių jūsų programos temą. Tai apima komponento **Icon** importavimą iš bibliotekos ir nustatymą kaip tabBarIcon skiltyje **screenOptions**. Tinkindami piktogramas suteikiate vizualiai patrauklesnę ir intuityvesnę naršymo patirtį vartotojams.

Kitas aspektas, į kurį reikia atsižvelgti, yra sąlyginio stiliaus naudojimas pagal aktyvų skirtuką. Naudodami **tabBarOptions** nuosavybę **focused**, galite dinamiškai keisti aktyvaus skirtuko stilių, kad jį paryškintumėte. Pavyzdžiui, galite koreguoti **tabBarLabelStyle** ir **tabBarIcon**, kad pakeistumėte spalvas arba dydžius, kai pasirinktas skirtukas. Ši technika pagerina vartotojų atsiliepimus ir daro naršymą intuityvesnį. Be to, skirtuke įdiegus apatinį lapą arba modalą, naudotojo patirtis bus geresnė, todėl viename skirtuke galima atlikti išsamesnę sąveiką.

Paskutinės mintys apie apatinio skirtuko navigatoriaus pritaikymą

Norint sėkmingai formuoti apatinio skirtuko navigatoriaus stilių „React Navigation“, reikia atidžiai stebėti detales. Naudodami atitinkamas savybes ir metodus galite sukurti sklandžią ir vizualiai patrauklią naršymo patirtį. Koreguojant kraštinės spindulį ir tvarkant paliktas erdves galima žymiai pagerinti programos estetiką ir patogumą, todėl ji bus patrauklesnė vartotojams.