Положение горизонтального элемента плоского списка относительно экрана - PullRequest
Новая
       26

Положение горизонтального элемента плоского списка относительно экрана

0 голосов
/ 20 января 2020

В моем компоненте горизонтальный плоский список, который отображает карты. Эти карты имеют одинаковую ширину и высоту. Когда пользователь выбирает элемент, я хочу иметь координаты x и y указанного элемента c относительно экрана.

Я попробовал разные предложенные подходы из документов, но они привели только к получению позиции по отношению ко всему сгенерированному плоскому списку. Я хотел бы иметь координаты, которые вы можете видеть, когда выбираете элемент через инспектор стилей.

Это код, который я использую: 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>

И это то, что я использовал для доступа к х и 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

Я уже пытался поставить Ссылка на изображение, не повезло. Также использование measureLayout с findNodeHandle для родительского представления всегда приводило к получению полных 1272 в качестве координаты оси.

Любые идеи, помощь в каком направлении я должен go?

...