Давайте попробуем создать сегментированный элемент управления с помощью React Native.

Вы также можете найти обновленный пакет npm здесь для того же с функцией темного режима.

Настройка React Native Project.

(Перейти к следующему разделу, если это уже сделано ..)

Перейдите по этой ссылке https://reactnative.dev/docs/environment-setup#docsNav и следуйте инструкциям по созданию нового проекта React native.

npx react-native init RN-SegmentedControl

Чтобы запустить приложение, запустите npx react-native run-ios в папке проекта React Native. Откройте свой проект в VS Code и перейдите к файлу с именем App.js., удалите код под оператором return и замените его на:

return {
 <>
  <View>
  </View>
 <>
}

Вы успешно завершили создание проекта.

Приступим к кодированию.

Идите вперед и создайте файлы:

SRC / компоненты / segmentedControl

Это наш компонент, который будет отображать сегментированный элемент управления.

Он принимает следующие реквизиты:

  1. вкладки: массив строк, метки для сегментов.
  2. onTabPress: функция обратного вызова, возвращающая индекс выбранного сегмента.
  3. currentIndex (необязательно): значение индекса для установки активного сегмента. По умолчанию 0.
  4. segmentedControlBackgroundColor ( Необязательно): Цвет фона сегментированного элемента управления.
  5. activeSegmentBackgroundColor (необязательно): цвет фона активного сегмента.
  6. textColor (необязательно): цвет метки сегмента.
  7. activeTextColor (необязательно): цвет метки активного сегмента.

Итак, здесь мы в основном стилизовали наш сегментированный элемент управления с помощью гибкости и отрисовали все метки.

Мы разместили абсолютное представление, которое указывает на активный сегмент, который будет переводиться в зависимости от нажатой метки сегмента.

Анимация здесь довольно простая. Мы переводим абсолютное представление на основе количества сегментов.

const translateValue = ((width - 4) / props?.tabs?.length

Это значение умножается на значение индекса активной вкладки, которое дает значение translateX.

{
transform: [
     {
          translateX: tabTranslate
     }
  ]
}

Это дает аккуратную анимацию при смене сегментов.

SRC / appRoot / index.js

В этом файле мы просто визуализируем наш компонент и настраиваем его в соответствии с нашими потребностями.

Теперь идите к App.js и визуализируйте <AppRoot/>.

Мы бы увидели что-то подобное.

Выглядит хорошо !! Посмотрим, как работает анимация.

Это работает!

Попробуем сейчас запустить проект на Android.

Ой. У нас есть проблемы...

Давайте перейдем к этому стилю к объекту textWrapper.

elevation: 9

Теперь экран будет выглядеть так:

Итак, теперь у нас есть настраиваемый сегментированный элемент управления для Android и iOS.

Удачного кодирования !!

Если вы найдете это полезным, загляните в мой блог об iOS-подобном компоненте поиска.



Компонент поиска React Native
Компонент поиска в стиле iOS в React Native. medium.com



Это Картик , представляющий вневременной .

Вы можете найти репо здесь и пакет npm здесь.

Если вы найдете этот пост в блоге полезным, поделитесь им с другом.

Если вы столкнетесь с какими-либо трудностями, не стесняйтесь добавлять свои комментарии.