Мобильная версияДля "react-native": "^0.70.5"
Требование:
[*]Плоский список как наложение над кликабельными элементами Заголовок [*]Flatlist имеет прозрачную область с pointerEvents="none", чтобы сделать элементы ниже кликабельными и при этом позволить Flatlist прокручиваться .
Проблемы с некоторыми возможными подходами
[*]pointerEvents="none" не работает с Flatlist, так как внутренне при построении Flatlist он блокирует события при всех значениях pointerEvents. То же самое и с Scrollview. [*]react-native-touch-through-view (именно та библиотека, которая мне нужна) не работает с RN 0.70.2, библиотека устарела. После устранения проблем со сборкой события касания не распространяются на кликабельные элементы. [*]Создал собственный компонент ScrollableView, поскольку pointerEvents с View работает хорошо. Добавление pointerEvents к none в дочерних частях позволяет событию касания распространяться на элементы ниже. [*]Это хорошо работает на Android, но не работает на iOS. [*]Кроме того, прокрутка изображения не плавная. [*]Требуется дополнительная обработка для оптимизации производительности длинных списков
import React, { useState, useRef } из 'реагировать'; импортировать {View, PanResponder, Animated} из «реагировать-родной»; const ScrollableView = ({дети, стиль, onScroll}) => { const ScrollY = useRef(new Animated.Value(0)).current; constlastScrollY = useRef(0); const ScrollYClamped = Animated.diffClamp(scrollY, 0, 1000); const panResponder = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true, onPanResponderMove: (_, жестState) => { ScrollY.setValue(lastScrollY.current + жестState.dy); }, onPanResponderRelease: (_, { vy, dy }) => { LastScrollY.current += dy; Animated.spring(scrollY, { toValue: LastScrollY.current, скорость: вы, напряжение: 2, трение: 8, использоватьNativeDriver: ложь, }).начинать(); }, }) ).текущий; константный комбинированный стиль = [ { преобразование: [{translateY: ScrollYClamped }], }, стиль ]; возвращаться ( {дети} ); }; экспортировать ScrollableView по умолчанию; Любое решение любого из трех вышеперечисленных подходов приветствуется.
