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

Stilingas apatinio skirtuko navigatorius su kraštinės spinduliu „React“ navigacijoje
Stilingas apatinio skirtuko navigatorius su kraštinės spinduliu „React“ navigacijoje
Mauve Garcia
2024 m. liepos 16 d., antradienis 16:56:38

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

komandą apibūdinimas
createBottomTabNavigator Sukuria apatinio skirtuko naršymo priemonę, leidžiančią naudotojams perjungti skirtingus programos ekranus.
screenOptions Leidžia tinkinti skirtukų juostą, įskaitant stiliaus ir išvaizdos ypatybes.
tabBarStyle Apibrėžia skirtukų juostos stilių, pvz., padėtį, fono spalvą, kraštinės spindulį ir šešėlio savybes.
NavigationContainer Inkapsuliuoja navigatorių ir pateikia navigacijos medžio kontekstą.
StyleSheet.create Sukuria StyleSheet objektą, kuris apibrėžia įvairius komponentų stilius ir užtikrina nuoseklų stilių.
shadowOffset Nurodomas šešėlio poslinkis, padidinantis komponento gylį ir vizualinį efektą.
elevation Nurodomas komponento z indekso aukštis, pirmiausia naudojamas „Android“, kad būtų sukurtas gylio pojūtis.

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.

Krašto spindulio taikymas apatinio skirtuko naršymo priemonėje „React Navigation“.

„JavaScript“ ir „React Native Code“, skirta „Frontend“.

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

Stilių atnaujinimas, siekiant užtikrinti kraštinių spindulį „React“ navigacijoje

CSS kodas backend

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

Dažni klausimai ir atsakymai apie apatinio skirtuko navigatoriaus stilių

  1. Kaip pakeisti apatinio skirtuko navigatoriaus fono spalvą?
  2. Naudoti tabBarStyle nuosavybė viduje screenOptions nustatyti backgroundColor.
  3. Ar galiu prie kiekvieno skirtuko pridėti pasirinktines piktogramas?
  4. Taip, importuokite Icon komponentas iš react-native-vector-icons ir nustatykite kaip tabBarIcon viduje screenOptions.
  5. Kaip galiu reguliuoti apatinio skirtuko navigatoriaus aukštį?
  6. Nustatyti height nuosavybė viduje tabBarStyle iki jūsų norimos vertės.
  7. Ar galima pakeisti aktyvaus skirtuko stilių?
  8. Taip, naudokite focused nuosavybė viduje tabBarOptions kad aktyviam skirtukui pritaikytumėte sąlyginį stilių.
  9. Kaip pridėti šešėlį prie apatinio skirtuko navigatoriaus?
  10. Naudokite tokias savybes kaip shadowColor, shadowOffset, shadowOpacity, ir elevation viduje tabBarStyle.
  11. Ar galiu nustatyti apatinio skirtuko navigatoriaus kraštinės spindulį?
  12. Taip, nustatykite borderRadius nuosavybė viduje tabBarStyle.
  13. Kaip spręsti tarpų problemas, kylančias dėl kraštinės spindulio?
  14. Nustatyti borderWidth ir borderColor savybės baltos viduje tabBarStyle.
  15. Ar galiu naudoti pasirinktinius komponentus skirtuke?
  16. Taip, galite pateikti pasirinktinius komponentus, nustatydami juos kaip skirtuko ekrano komponentą.
  17. Ar galima paslėpti apatinio skirtuko navigatorių tam tikruose ekranuose?
  18. Taip, naudokite tabBarVisible nuosavybė viduje screenOptions jei norite sąlyginai paslėpti skirtukų juostą.
  19. Kaip galiu animuoti perėjimą tarp skirtukų?
  20. Naudoti tabBarOptions nuosavybė nustatyti animacijas, pvz tabBarAnimationEnabled sklandesniems perėjimams.

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.