Стилизовање навигатора доње картице са радијусом ивице у Реацт навигацији

Прилагођавање навигатора доње картице у Реацт Нативе-у

Када раде са `цреатеБоттомТабНавигатор` у Реацт Навигатион 0.7к, програмери често настоје да побољшају визуелну привлачност својих апликација. Једно уобичајено прилагођавање је примена радијуса границе на навигатор доње картице. Међутим, ово понекад може оставити нежељене просторе који се не уклапају са укупним дизајном.

У овом чланку ћемо истражити како да се позабавимо овим проблемима дизајна променом преосталих простора од радијуса границе у белу боју. Ово решење ће обезбедити беспрекоран и углађен изглед ваше Реацт Нативе апликације, побољшавајући корисничко искуство и доследност интерфејса.

Побољшање навигатора доње картице помоћу радијуса границе

У приложеним скриптама се бавимо прилагођавањем Навигатора доње картице у Реацт Навигатион 0.7к применом радијуса ивице и осигуравањем да су размаци које оставља полупречник ивице бели. Главне укључене компоненте су цреатеБоттомТабНавигатор и НавигатионЦонтаинер. Функција цреатеБоттомТабНавигатор подешава навигатор картица, који омогућава корисницима да се пребацују између различитих екрана у апликацији. НавигатионЦонтаинер инкапсулира навигатор и обезбеђује неопходан контекст за стабло навигације. Коришћењем сцреенОптионс, можемо да прилагодимо изглед траке са картицама, укључујући њену позицију, боју позадине и радијус ивице.

Својство табБарСтиле се користи за дефинисање стила траке са картицама. Кључна својства укључују позицију, боја позадине, бордерРадиус и боја сенке. Метода СтилеСхеет.цреате се користи за креирање објекта са стиловима који обезбеђује доследан стил између компоненти. Да бисмо решили проблем размака које оставља радијус ивице, користимо својства као што су бордерВидтх и бордерЦолор да бисмо ивицу поставили на белу, обезбеђујући беспрекоран изглед. Својства схадовОффсет, схадовОпацити и елеватион побољшавају дубину и визуелни ефекат траке са картицама, при чему је елевација посебно важна за Андроид да би створио осећај дубине.

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

Напредне технике за стилизовање навигатора доње картице

Осим основног стила Навигатора доње картице у Реацт Навигацији, напредне технике могу додатно побољшати кориснички интерфејс. Један такав метод је интеграција прилагођених икона за сваку картицу. Користећи библиотеке попут реацт-нативе-вецтор-ицонс, можете додати скалабилне векторске иконе које одговарају теми ваше апликације. Ово укључује увоз компоненте Икона из библиотеке и њено постављање као табБарИцон у оквиру Опција екрана. Прилагођавањем икона корисницима пружате визуелно привлачније и интуитивније искуство навигације.

Други аспект који треба размотрити је употреба условног стила заснованог на активној картици. Коришћењем својства фокусирано у оквиру табБарОптионс, можете динамички променити стил активне картице да бисте је истакли. На пример, можете да подесите табБарЛабелСтиле и табБарИцон да бисте променили боје или величине када је картица изабрана. Ова техника побољшава повратне информације корисника и чини навигацију интуитивнијом. Поред тога, имплементација доњег листа или модала унутар картице може пружити богатије корисничко искуство, омогућавајући детаљније интеракције унутар једне картице.

Завршна размишљања о прилагођавању навигатора доње картице

Успешно стилизовање Доње картице Навигатор у Реацт Навигатион захтева пажљиву пажњу на детаље. Користећи одговарајућа својства и методе, можете створити беспрекорно и визуелно привлачно искуство навигације. Подешавање радијуса границе и управљање преосталим просторима може значајно побољшати естетику и употребљивост апликације, чинећи је привлачнијом за кориснике.