带Redux的ReactNative-FlatList scrollToEnd

Question

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

我使用connect方法：

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

州：

export interface IChatState {
    messages: Message[]
}

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

Answer 1

平面列表有一个名为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,
               });

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