ReactNative 与 Redux - FlatList scrollToEnd

【问题标题】：ReactNative with Redux - FlatList scrollToEndReactNative 与 Redux - FlatList scrollToEnd
【发布时间】：2018-05-06 17:19:52
【问题描述】：

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

我使用connect方法：

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

状态：

export interface IChatState {
    messages: Message[]
}

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

【问题讨论】：

添加您的 FlatList 的代码并尝试进行滚动

标签： react-native redux react-native-flatlist

【解决方案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());
}

如果您希望您的列表添加更多信息，那么只需连接列表，这是我的 fetch 方法（我正在使用 state，但在 redux 中工作方式相同）

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

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

【讨论】：