Давайте попробуем создать сегментированный элемент управления с помощью 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
Это наш компонент, который будет отображать сегментированный элемент управления.
Он принимает следующие реквизиты:
- вкладки: массив строк, метки для сегментов.
- onTabPress: функция обратного вызова, возвращающая индекс выбранного сегмента.
- currentIndex (необязательно): значение индекса для установки активного сегмента. По умолчанию 0.
- segmentedControlBackgroundColor ( Необязательно): Цвет фона сегментированного элемента управления.
- activeSegmentBackgroundColor (необязательно): цвет фона активного сегмента.
- textColor (необязательно): цвет метки сегмента.
- 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-подобном компоненте поиска.
Это Картик , представляющий вневременной .
Вы можете найти репо здесь и пакет npm здесь.
Если вы найдете этот пост в блоге полезным, поделитесь им с другом.
Если вы столкнетесь с какими-либо трудностями, не стесняйтесь добавлять свои комментарии.