Как использовать функцию scrollTo с аргументом, если цель не x и y в ListView?

Question

У меня есть проблема с get x и y, когда у меня есть несколько <View />, но я обнаружил, что значение аргумента target является правильным.Поэтому я решил использовать его.

Вот моя функция scrollTo:

listView.scrollTo({ x, y, animated: true});

Я изменяю это так, но этоне работает:

listView.scrollTo({ target, animated: true});

Есть ли способ использования scrollTo с target?

Любая помощь приветствуется.

Answer 1

Вы должны реализовать свой собственный метод scrollToTarget, чтобы достичь этого.

Мое решение будет что-то.как это:

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, findNodeHandle, Button } from 'react-native';

export default class App extends React.Component {

  itemRefs = [];
  state = {
    dummyList: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"]
  };

  scrollToItem = () => {
    // Scroll to Item 2
    let refToScroll = this.itemRefs["Item 2"];
    refToScroll.measureLayout(findNodeHandle(this.listRef), (x,y) => {this.listRef.scrollTo({x: 0, y: y, animated: true})});
  }

  renderItems = ({ item }) => {
   return (
     <View ref={ref => {this.itemRefs[item] = ref}} style={{height: 200, margin: 20, borderWidth: 5, borderColor: "black"}}>
      <Text>{item}</Text>
     </View>
   )
  }

  render() {
    return (
      <View>
      <View style={{height: 25}}/>
      <Button containerStyle={{height: 55}} title="Click to scroll" onPress={this.scrollToItem} />
      <ScrollView
        ref={ref => {this.listRef = ref}}
        data = {this.state.dummyList}
        renderItem ={this.renderItems}
        >
        {this.state.dummyList.map(item => (
          <View ref={ref => {this.itemRefs[item] = ref}} style={{height: 200, margin: 20, borderWidth: 5, borderColor: "black"}}>
            <Text>{item}</Text>
          </View>
        ))}
        </ScrollView>
        </View>
    );
  }
}