Question

我需要将FlatList组件滚动到接收新数据后结束（在我的情况下是新消息）。我尝试使用setTimeout等，FlatList从不滚动。我使用redux架构，但我无法访问setState方法，我从未调用过它manualy。

我使用connect方法：

export default connect(
    (state: IAppState) => mapPropsToState(state.chat),
    mapPropsToDispatch
)(Chat)

州：

export interface IChatState {
    messages: Message[]
}

我应该在何时何地调用scrollToEnd方法。

Answer 1

Theres一个名为onEndReached的平面列表的属性如下：

 <FlatList
  onEndReached={this.handleEnd}
  onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.5} />
 </Flatlist>

然后创建一个处理结束的方法，我使用一个方法将+1添加到当前页面，然后在另一个将填充列表的方法中获取数据：

 handleEnd = () => {
    this.setState({
        page: this.state.page + 1,
    }, () => this.fetchData());
}

如果您希望列表添加更多信息，那么只需连接列表，继承我的获取方法（我使用状态但在redux中的工作方式相同）

 this.setState({
                data:[...this.state.data, ...res.results],
                error:res.error || null,
                loading:false,
                refreshing: false,
               });

通过这种方式，您可以向列表中添加更多信息，我希望这对您有所帮助！

ReactNative与Redux - FlatList scrollToEnd

1 个答案: