Question

上下文：

嗨，大家好，我正在使用“ expo”与“ react-native”一起工作，我有一个倒置的“ FlatList”，其中呈现了从一月到十二月的几个月的“数组”。

请求：

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

当前情况：

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

需要：

您能帮我找到解决此问题的方法吗？我需要做同样的事情，但是用户看不到滚动运动，他只应该看到焦点所在的项目。有想法吗？

演示代码：

平面列表

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

聚焦项目的功能

handlePosition(id) {
  /* Item Size from FlatList */
  const itemSize = deviceWidth / 2 + 30;
  /* Id of the current month */
  const idCurrentItem = id;

  this.flatList.scrollToOffset({
    animated: true,
    offset: itemSize * idCurrentItem,
  });
}

声明在哪里调用handlePosition函数

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

Answer 1

使用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});
}

对initialScrollIndex的必要声明工作成功

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

以下是FlatList组件添加新道具的示例：

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

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

1 个答案: