ReactNative与Redux - FlatList scrollToEnd

时间:2018-05-06 17:19:52

标签: react-native redux react-native-flatlist

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

我使用connect方法:

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

州:

export interface IChatState {
    messages: Message[]
}

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

1 个答案:

答案 0 :(得分:0)

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,
               });

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