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

coder 2024-01-28 原文

我正在构建一个应用程序，其中有一个名为 <SearchBar /> 的可实现 header 其中有 Prop isCollaped (值可以是 true 或 false)打开和关闭容器，以及 <ScrollView /> (下面的屏幕截图，很抱歉没有英文文本)。应用截图:

Case when isCollaped == false

Case when isCollaped == true

我想折叠 <SearchBar />当开始滚动 <ScrollView /> 时所以我设置了 isCollaped 的值为真，它有效，但因为 <ScrollView />打电话onScroll每 200 毫秒，当我尝试打开 <SearchBar /> 时，松开手指后滚动动画不会停止再次按下它，如果滚动动画仍然处于 Activity 状态，我会得到一个非常有问题的动画，它会折叠 <SearchBar />。再次。

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

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

这是 <SearchBar/> :

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

这是 <ScrollView /> 的代码:

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

我的问题是:如何制作 <ScrollView />调用onScroll只是一次，当用户滑动它时，而不是一直(每 200 毫秒，动画开始后大约 3 秒)，同时动画处于 Activity 状态。

最佳答案

您可以使用 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/

有关android - 在 React-Native 中滚动一次调用函数的更多相关文章

ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。最佳答案这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
ruby-on-rails - 在 ruby 中使用 gsub 函数替换单词 - 2
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2
我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file
ruby - 在 Ruby 中有条件地定义函数 - 2
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2
我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe
c# - 如何在 ruby 中调用 C# dll？ - 2
如何在ruby中调用C#dll？最佳答案我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器，如果它还没有，则使用Ruby的WIN32OLE库来调用它；看看RubyCLR,其中一位作者是JohnLam，他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了，可能不支持.Net2.0以上的版本)；正如其他地方已经提到的，看看使用IronRuby，如果这是您的技术选择。有一个主题是here.请注意，最后一篇文章实际上来自JohnLam(看起来像是2009年3月)，他似乎很自在地断言RubyCL
java - 从 JRuby 调用 Java 类的问题 - 2
我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www
ruby - 调用其他方法的 TDD 方法的正确方法 - 2
我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

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

有关android - 在 React-Native 中滚动一次调用函数的更多相关文章

随机推荐