1

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

目标

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

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

我的预感是，在 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 的宽度会在 web 上产生 ~250/300（正确）的 locationX 和50/300 在 iOS 上。

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

似乎在 ios 上，事件相对于第三个 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"
},
4

1 回答 1

0

最终设置了一个 refonLayout并忽略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
于 2021-06-21T16:07:10.600 回答