水平平面清单项目相对于屏幕的位置

Question

我的组件中有一个水平平面列表，用于渲染卡片。这些卡具有相同的宽度和高度。当用户选择一个项目时，我想要特定项目相对于屏幕的x和y坐标。

我尝试了与文档不同的建议方法，但是它们仅导致获得相对于整个生成的清单的位置。当您通过样式检查器选择项目时，我希望可以看到坐标。

这是我正在使用的代码：FlatlistParent：

<FlatList
    data={this.props.data}
    renderItem={this.renderItem}
    keyExtractor={item => item.key}
    horizontal={true}
    showsHorizontalScrollIndicator={false}
    onScrollBeginDrag={this.horizontalScrollStarted}
    getItemLayout={(data, index) => (
    {length: itemWidth, offset: itemWidth * index, index}
)}/>

和renderItem（）

      <View ref={ref => this.temp = ref} onLayout={this._onLayout}>
        <Animated.View style={[styles.hiddenChild, scaleStyle]}>
        </Animated.View>
        <PanGestureHandler
          onGestureEvent={_handleGesture}
          onHandlerStateChange={_handleStateChange}
          activeOffsetY={[-10, 10]}
          >
          <Animated.View style={[styles.shadow, translateStyle]}>
            <TouchableNativeFeedback onPress={() => this._onPressButton(item)} >
              <FastImage source={{uri: item.imagePath}} style={styles.item}/>
              <LinearGradient start={{x: 0, y: 1}} end={{x: 0, y: 0}} colors={["black", "#00000000"]} style={styles.linearGradient}></LinearGradient>
              <View style={styles.titleParent}>
                  <Text style={styles.title}>{item.title}</Text>
              </View>
            </TouchableNativeFeedback>
          </Animated.View>
        </PanGestureHandler>
      </View>

这就是我用来访问项目的x和y坐标的内容：

  _onLayout = ({ nativeEvent: { layout: { x, y }} }) => {
    this.secondTemp = [x, y]
  };

  _onPressButton(item) {
    this.temp.measure((x, y, pageX, pageY) => {
      console.log('#1 ' + x + ' ' + y + ' ' + pageX + ' ' + pageY)
      console.log('#2 ' + this.secondTemp)
    })

    this.temp.measureInWindow((x, y) => {
          console.log('#3 ' + x,y)
    })

    const { navigate } = this.props.navigation;
    // navigate('RecipeDetail', item)
  }

控制台输出如下内容，用于将平面列表从初始位置稍微移动并按下按钮：

 LOG  #1 0 0
 LOG  #2 0,0
 LOG  #3 1272 0
___________
 LOG  #1 0 0
 LOG  #2 0,0
 LOG  #3 1201 0
___________
 LOG  #1 0 0
 LOG  #2 0,0
 LOG  #3 1145.75 0

我已经尝试过将ref调用放在图像上，那里没有运气。同样使用带有父节点的findNodeHandle的measureLayout导致始终将完整的1272作为x坐标。

任何想法，我必须朝哪个方向寻求帮助？

Answer 1

有人找到解决方案了吗？我面临着同样的问题，仍然没有修复的可能。我希望我错了