水平自动滚动到 React 组件

Question

我有一个 React 应用程序，我在其中呈现水平列表选秀。在任何时间点，一个选秀权处于活动状态，但在某个时间点进行了选秀，然后下一个选秀权开始生效。当下一个变为活动状态时，我希望列表水平自动滚动，以便始终显示活动选择。

我确定以前有人问过这个问题，但我真的不知道如何使 React 组件发生自动滚动事件。

这是我的代码：

DraftOrder.js：

class DraftOrder extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className="d-flex flex-row auto-scroll-x">
          {this.props.draftPicks.map(aDraftPick => {
            return <ADraftPickInOrder key={v4()} draftPick={aDraftPick} team={this.props.team} />
          })}
        </div>
      </React.Fragment>
    );
  }
}

ADraftPickInOrder.js：

class ADraftPickInOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: this.props.draftPick.active
    }
    this.renderUserName = this.renderUserName.bind(this);
    this.renderDraftedPlayer = this.renderDraftedPlayer.bind(this);
  }


  renderUserName() {
     ...
  }

  renderDraftedPlayer() {
    ...
  }

  render() {
    return (
      <div className="text-center px-3">
        <div className={classnames("font-weight-bold no-wrap", { "text-success" : this.props.draftPick.team.id === this.props.team.id } )}>{this.props.draftPick.team.name}</div>
        {this.renderUserName()}
        {this.renderDraftedPlayer()}
        <div><small>{formatDraftPickNumber(this.props.draftPick)}</small></div>
      </div>
    );
  }
}

任何帮助将不胜感激！

Answer 1

使用 ScrollView 和它的 scrollTo 方法：

import { ScrollView } from 'react-native';

...

setScrollViewRef = ref => {
  this.scrollView = ref;
};

handlePress = ({nativeEvent}) => {
  const { pageX, pageY } = nativeEvent;
  // find out x and y somehow
  this.scrollView.scrollTo({x, y, animated: true})
}


render() {
  <ScrollView
    horizontal 
    ref={this.setScrollViewRef}
    showsHorizontalScrollIndicator={false}>
     <DraftPick onPress={this.handlePress} />
     <DraftPick onPress={this.handlePress} />
     ...
  </ScrollView>
}