Прокрутка - это тип компонента, который позволяет вам просматривать контент, который не может быть отображен на одном экране. Это означает, что вы можете прокручивать контент по вертикали или горизонтали. Практически каждому веб-сайту или приложению требуется такая возможность.
В React Native есть два разных типа основных видов прокрутки. ScrollView отображает все дочерние компоненты одновременно, что позволяет использовать его в сценариях, в которых нет огромных списков элементов.
FlatList - еще один компонент, который отображает элементы в соответствии с предоставленными вами данными. В некоторых случаях это может улучшить производительность. Я сделаю отдельный пост, сравнивающий эти два.
Индикатор прокрутки или полоса прокрутки показывает текущее положение прокрутки содержимого в представлении прокрутки. Но стандартный индикатор прокрутки выглядит довольно просто. Чтобы улучшить визуальное впечатление и удобство использования вашего приложения, вы можете изменить стиль по умолчанию.
И ScrollView, и FlatList предоставляют функциональные возможности для создания собственного индикатора прокрутки. Чтобы отключить индикатор прокрутки по умолчанию, вам нужно использовать опору showsVerticalScrollIndicator или showsHorizontalScrollIndicator.
Затем вам нужно отслеживать смещение содержимого в представлении прокрутки, поскольку оно изменяется при прокрутке. Для этого вы можете использовать обратный вызов onScroll, в котором вы сохраняете смещение.
После того, как это сработает, вы хотите узнать фактический размер (прокручиваемого) содержимого представления прокрутки, чтобы вычислить позицию. Для этого вы можете использовать обратный вызов onContentSizeChange и сохранить значение (высота / ширина).
При тестировании вы могли понять, что при прокрутке вниз конечная позиция смещения содержимого не соответствует размеру содержимого прокрутки. Уловка заключается в том, чтобы дополнительно взять размер самого представления прокрутки, а это недостающая часть. Вы можете получить это значение с помощью обратного вызова onLayout, который можно использовать в любом React Native View для получения его измерений.
Наконец, размер содержимого будет вычтен на размер прокрутки, и расчет должен быть правильным. Фактическая высота индикатора прокрутки определяется как scrollElementHeightPercent, что соответствует размеру его родительского представления, полосы прокрутки.
Затем компонент индикатора прокрутки работает с использованием absolute позиционирования, top и height процентов.
Вы можете найти исходный код здесь.
Первоначально опубликовано на https://mariusreimer.com 9 августа 2020 г.
