OGeek|极客世界-中国程序员成长平台

标题: android - 在 React-Native 中滚动一次调用函数 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:57
标题: android - 在 React-Native 中滚动一次调用函数

我正在构建一个应用程序，其中我有一个名为 的可实现标题，它具有 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/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4