Реализация динамически изменяемого компонента заголовка в React Native (с использованием собственных драйверов) - PullRequest
0 голосов
/ 26 марта 2020

, поэтому я пытаюсь реализовать следующее:

enter image description here

Идея состоит в том, чтобы создать канал с набором пользователей над ним (скорее как пользовательский интерфейс Instagram). Когда пользователь попадает на страницу, элементы заголовка изначально имеют большой формат, но по мере прокрутки пользователь сжимается до тех пор, пока не перейдет в меньший формат. По мере того, как они сокращаются, из списка следует раскрывать больше.

Непосредственная регулировка высоты заголовка

Первоначальный подход заключается в получении коллекции View компоненты внутри Animated.FlatList и имеют Animated.Value, Animated.event и Animated.interpolated, которые обновляют свойство height Flatlist. Элементы заголовка внутри имеют максимальную / минимальную высоту и гибкость, поэтому они масштабируются вверх и вниз, как и заголовок.

Animated.Value привязан к прокрутке канала (он объявлен в родительском компоненте). канала и заголовка и передается в оба), но влияет на внешний вид заголовка.

Проблема в том, что это очень изменчиво на Android и довольно изменчиво на iOS.

Введите Native Drivers

Поэтому я решил использовать useNativeDrivers, поскольку это значительно улучшает частоту кадров. Теперь проблема в том, что я не могу обновить height, поскольку родные драйверы, кажется, не поддерживают это, только transform.

Имея это в виду, я попытался реализовать ту же идею с scaleX/Y а также. Теперь проблема в том, что он масштабирует заголовок, но поскольку мы не можем выбрать точку привязки, он просто делает это на месте:

enter image description here

Вы можете попробовать чтобы приспособиться к этому с помощью translateX/Y, но, как вы можете видеть на фотографии, это не очень помогает, поскольку оно просто масштабирует то, что на экране, а не изменяет высоту.

Я в растерянности из-за того, как реализовать это. Кажется, я застрял между решением, которое работает, но ужасно анимировано, или решением, которое не работает, но прекрасно анимировано.

Кто-нибудь может дать некоторые рекомендации или предложения?

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...