React Native Search

Эй, ребята !! Возможно, каждое приложение, с которым вы сталкивались, имеет это поле поиска, привязанное к прокручивающемуся контейнеру, как показано ниже:

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

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

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

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

npx react-native init ReactNativeSearch

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

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

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

Приступим к созданию необходимых экранов / компонентов.

Создать папку src
Создайте файлы LoaderComponent.js (для наших блоков внутри ScrollView) и SearchComponent.js (для нашего поля поиска).

Теперь давайте быстро приступим к написанию кода.

Анимированный ScrollView в App.js

Итак, здесь мы создаем анимированную переменную scrollYValue и связываем ее с событием onScroll ScrollView.

Затем мы создаем зажатую прокрутку, которая является Animated.diffClamp. Чтобы узнать об этом больше, посетите https://reactnative.dev/docs/animated.html#diffclamp.