Javascript FlatList React Native：如何在特定列表项中集中滚动

上下文：

我正在使用“expo”来处理“react native”，我有一个倒排的“平面列表”，其中呈现了一个从1月到12月的“数组”

请求：

在向用户显示列表之前，列表应集中在当前月份

当前情况：

我正在使用“FlatList”“scrollToOffset”属性来执行此请求，当列表接收到“datasource”时，列表会自动触发“this.FlatList.scrollToOffset”语句，该语句会使滚动动画化并聚焦特定项。但是我有一个问题，这个动画是一个突然的动作，破坏了用户体验

需要：

你能帮我找到解决这个问题的办法吗？我需要做同样的事情，但用户看不到滚动运动，他应该只看到项目的重点。 有什么想法吗

演示代码：

扁平列表

<FlatList
  ref={ref => (this.flatList = ref)}
  inverted
  data={foods}
  keyExtractor={this.keyExtractor}
  renderItem={this.renderItem}
/>

语句调用handlePosition函数

componentDidMount() {
  this.handlePosition(this.props.months[2].id);
}

---

使用

FlatList

组件的initialScrollIndex属性来排序要启动FlatList的索引

为此，必须在componentDidMount或componentWillMount函数中计算渲染前的月份，在该函数中，必须将月份（或索引）存储在状态中。然后您将在Flatlist组件中访问此状态，并将initialscrollIndex设置为它

这里是componentWillMount函数的示例：

componentWillMount() {
...
  //assuming that we are on February will set index scroll to 1 being 0 January 
  //and being 3 March
  this.setState({monthToStart: 1});
}

初始化索引工作成功的必要声明

getItemLayout(data, index) {
  return (
    {
      length: yourItemHeightSize,
      offset: yourItemHeightSize * index,
      index
    }    
  );
}

下面是平面列表组件添加新道具的示例：

  <FlatList
    ref={ref => (this.flatList = ref)}
    inverted
    data={foods}
    keyExtractor={this.keyExtractor}
    getItemLayout={(data, index) => this.getItemLayout(data, index)}
    renderItem={this.renderItem}
    initialScrollIndex={this.state.monthToStart}
  />

（this.flatList=ref）}
倒转的
数据={foods}
keyExtractor={this.keyExtractor}
getItemLayout={（数据，索引）=>this.getItemLayout（数据，索引）}
renderItem={this.renderItem}
initialScrollIndex={this.state.monthToStart}
/>

set

animated:false

inscrollToOffset@ShashinBhayani谢谢你的评论。我已经使用了这种方式，但是这更突然，这就是我发布我的问题的原因。我不知道如何避免动画，但是，当动画正在“隐藏”并锁定用户的交互时，您可以放置一个ActivityIndicator（加载警报），直到设置月份为止。@MtgKhaJeskai感谢您的评论。是的，这就是我刚才所做的，是我想到的第一个解决方案。除了我想使用“FlatList”或“ScrollView”属性来解决此请求之外。请尝试我回答的内容。感谢您的帮助，尽管此语句需要getItemLayout（）才能正常工作。生产中的测试也是必要的，因为开发环境中的转换非常缓慢。很好，它对您有效吗？如果是，请将此问题设置为正确！问候语

  <FlatList
    ref={ref => (this.flatList = ref)}
    inverted
    data={foods}
    keyExtractor={this.keyExtractor}
    getItemLayout={(data, index) => this.getItemLayout(data, index)}
    renderItem={this.renderItem}
    initialScrollIndex={this.state.monthToStart}
  />