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>
}

水平自动滚动到React组件

1 个答案: