react-native – 如何滚动到底部在React Native ListView

发布时间：2020-12-15 06:37:07 所属栏目：百科来源：网络整理

导读：我使用react native编写一个应用程序。它有一个ListView来显示项目列表。当有新的项目可用时，我在底部附加新项目。我想滚动到底部的ListView自动显示新的项目。但是，我找不到一个办法。任何帮助将不胜感激。谢谢！我为ScrollView解决这个问题。这里是

我使用react native编写一个应用程序。它有一个ListView来显示项目列表。

当有新的项目可用时，我在底部附加新项目。
我想滚动到底部的ListView自动显示新的项目。但是，我找不到一个办法。

任何帮助将不胜感激。谢谢！

我为ScrollView解决这个问题。这里是简单的例子：

class MessageList extends Component {
    componentDidUpdate() {
        let innerScrollView = this._scrollView.refs.InnerScrollView;
        let scrollView = this._scrollView.refs.ScrollView;

        requestAnimationFrame(() => {
            innerScrollView.measure((innerScrollViewX,innerScrollViewY,innerScrollViewWidth,innerScrollViewHeight) => {
                scrollView.measure((scrollViewX,scrollViewY,scrollViewWidth,scrollViewHeight) => {
                    var scrollTo = innerScrollViewHeight - scrollViewHeight + innerScrollViewY;

                    if (innerScrollViewHeight < scrollViewHeight) {
                        return;
                    }

                    this._scrollView.scrollTo(scrollTo);
                });
            });
        });
    }

    render() {
        return (
            <ScrollView ref={component => this._scrollView = component}>
                {this.props.messages.map((message,i) => {
                    return <Text key={i}>{message}</Text>;
                })}
            </ScrollView>
        );
    }
}

感谢@ccheever

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!