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

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.

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

1. Kaip pakeisti apatinio skirtuko navigatoriaus fono spalvą?
2. Naudoti nuosavybė viduje nustatyti .
3. Ar galiu prie kiekvieno skirtuko pridėti pasirinktines piktogramas?
4. Taip, importuokite komponentas iš ir nustatykite kaip viduje screenOptions.
5. Kaip galiu reguliuoti apatinio skirtuko navigatoriaus aukštį?
6. Nustatyti nuosavybė viduje iki jūsų norimos vertės.
7. Ar galima pakeisti aktyvaus skirtuko stilių?
8. Taip, naudokite nuosavybė viduje kad aktyviam skirtukui pritaikytumėte sąlyginį stilių.
9. Kaip pridėti šešėlį prie apatinio skirtuko navigatoriaus?
10. Naudokite tokias savybes kaip , , , ir elevation viduje .
11. Ar galiu nustatyti apatinio skirtuko navigatoriaus kraštinės spindulį?
12. Taip, nustatykite nuosavybė viduje .
13. Kaip spręsti tarpų problemas, kylančias dėl kraštinės spindulio?
14. Nustatyti ir savybės baltos viduje .
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 nuosavybė viduje jei norite sąlyginai paslėpti skirtukų juostą.
19. Kaip galiu animuoti perėjimą tarp skirtukų?
20. Naudoti nuosavybė nustatyti animacijas, pvz 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.