• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

android - 在 React-Native 中滚动一次调用函数

[复制链接]
菜鸟教程小白 发表于 2022-12-11 19:57:20 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我正在构建一个应用程序,其中我有一个名为 的可实现标题,它具有 prop isCollaped (值可以是 true 或 false),它打开并关闭容器,和一个 (截图如下,抱歉没有英文文本)。 应用截图:

Case when isCollaped == false

Case when isCollaped == true

我想在开始滚动 时折叠 所以我正在设置 isCollaped 的值为真,它可以工作,但由于 每 200 毫秒调用一次 onScroll,并且当我尝试打开 再次按下它,如果滚动动画仍然处于 Activity 状态,我会得到一个非常错误的动画,它会再次折叠

这部分代码在按下 SearchBar 时会调整其大小:

collapseSearchBar = () => {
   this.setState({
      searchBarCollapsed: !this.state.searchBarCollapsed,
   });
};

这是:

<SearchBar
   isCollapsed={this.state.searchBarCollapsed}
   onCollapse={this.collapseSearchBar}
   onSearch={this.search}
/>

这是的代码:

<ListView
      ref='mainScrollView'
      dataSource={this.state.dataSource}
      renderRow={(rowData) => {
          return this._renderRow(rowData, this.props.navigation);
      }}
      onScroll={() => {
        if (!this.state.searchBarCollapsed) {
          this.setState({
            searchBarCollapsed: true
          });
        }
      }}
/>

我的问题是:我怎样才能让 调用 onScroll 一次,当用户滑动它时,而不是一直(每 200 毫秒,对于动画开始后大约 3 秒),同时动画处于 Activity 状态。



Best Answer-推荐答案


您可以使用 scrollEventThrottle prop 设置 scroll 事件触发的频率。

scrollEventThrottle

This controls how often the scroll event will be fired while scrolling (as a time interval in ms). A lower number yields better accuracy for code that is tracking the scroll position, but can lead to scroll performance problems due to the volume of information being send over the bridge. You will not notice a difference between values set between 1-16 as the JS run loop is synced to the screen refresh rate. If you do not need precise scroll position tracking, set this value higher to limit the information being sent across the bridge. The default value is zero, which results in the scroll event being sent only once each time the view is scrolled.

但我认为这不会解决您的问题。您可以做些什么来设置第二个状态值(类似于 isAnimating)并在为标题设置动画之前检查它。动画结束后,您可以将其设置回 false。

示例

<ListView
      ref='mainScrollView'
      dataSource={this.state.dataSource}
      renderRow={(rowData) => {
          return this._renderRow(rowData, this.props.navigation);
      }}
      onScroll={() => {
        if (!this.state.searchBarCollapsed) {
          this.setState({
            searchBarCollapsed: true,
            isAnimating: true
          });
        }
      }}
/>

collapseSearchBar = () => {
   this.interval = setInterval(() => {
     if (this.state.isAnimating === false) {
       this.setState({
         searchBarCollapsed: !this.state.searchBarCollapsed,
         isAnimating: true
       });
       clearInterval(this.interval);
       this.interval = null;
     }
   }, 100)
};

关于android - 在 React-Native 中滚动一次调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49571764/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap