React Native PanResponder onStartShouldSetPanResponder locationX 因平台而异

问题描述

我是 RN 手势 apis 的新手，所以如果其中任何一个看起来像一个根本不正确的方法，我将非常感谢反馈以及关于在哪里查找的任何建议。谢谢！ ?

目标

• 使用 PanResponder api 仅处理点击和滑动手势
• 使用 onStartShouldSetPanResponder 处理仅点击和移动前滑动
• 保证由 event.nativeEvent 处理的 onStartShouldSetPanResponder 具有相对于 ListComponent 的定位信息，而不是列表组件的子级。

以下代码根据我是否通过 expo 的本地 Web 服务器和 expo ios 应用程序进行测试而收到不同的 event.nativeEvent。考虑到底层基础架构的不同，这似乎是合理的。

我的预感是，在 ios 上，onStartShouldSetPanResponder 处理程序触发“太晚”（或太早？），也就是说，手势被归因于子组件，因此冒泡到此处理程序的事件具有相对定位到子组件，而不是下面渲染函数中的列表组件。

const panResponder = useRef(
  PanResponder.create({
    onStartShouldSetPanResponder: (event: GestureResponderEvent) => {
      console.log(event.nativeEvent.locationX)
      updateSelectionValue(event.nativeEvent.locationX) // does some math and conditionally updates local state
    },onStartShouldSetPanResponder: () => true,onPanResponderMove: handleSwipe,})
).current

return (
  <View onLayout={handleLayout} {...panResponder.panHandlers}>
    <ListComponent proportion={selectionValue} {...props} />
  </View>
)

鉴于列表组件宽 300px，并且列表组件中有 3 个 100px 宽的项目，从列表组件左侧点击大约 5/6 的宽度会产生 ~250/300（正确）的 locationX网页版和 ios 版 50/300。

List     [----------------300px----------------]
Children [---100px---][---100px---][---100px---]
Tapping Here ---------------------------^^

似乎在 ios 上，事件是相对于第 3 个 100px 宽的子元素定位的。

附加上下文：

node --version
v15.12.0

"dependencies": {
  "expo": "~40.0.0","expo-status-bar": "~1.0.3","react": "16.13.1","react-dom": "16.13.1","react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz","react-native-web": "~0.13.12"
},

解决方法

最终设置了一个引用 onLayout 并忽略了 event.nativeEvent 以支持 gestureState.x0 和 gestureState.moveX

let coords = useRef({ x: -1,y: -1 }).current

const handleLayout = useCallback((event: LayoutChangeEvent) => {
  const { x,y } = event.nativeEvent.layout
  coords = { x: Math.round(x),y: Math.round(y) }
},[])
...
const panResponder = useRef(
 PanResponder.create({
   onStartShouldSetPanResponder: () => true,onPanResponderStart: (event,gestureState) =>
   updateSelectionValue(gestureState.x0 - coords.x),onPanResponderMove: (event,gestureState) =>
   updateSelectionValue(gestureState.moveX - coords.x),})
).current