android - 在 React-Native 中滚动一次调用函数
<p><p>我正在构建一个应用程序，其中我有一个名为 <code><SearchBar/></code> 的可实现标题，它具有 prop <code>isCollaped</code> (值可以是 true 或 false)，它打开并关闭容器，和一个 <code><ScrollView/></code> (截图如下，抱歉没有英文文本)。
应用截图:</p>
<p> <a href="/image/3ryBB.png" rel="noreferrer noopener nofollow">Case when <code>isCollaped == false</code></a> </p>
<p> <a href="/image/0addT.png" rel="noreferrer noopener nofollow">Case when <code>isCollaped == true</code></a> </p>
<p>我想在开始滚动 <code><ScrollView/></code> 时折叠 <code><SearchBar/></code> 所以我正在设置 <code>isCollaped</code> 的值为真，它可以工作，但由于 <code><ScrollView/></code> 每 200 毫秒调用一次 <code>onScroll</code>，并且当我尝试打开 <code><SearchBar/></code> 再次按下它，如果滚动动画仍然处于 Activity 状态，我会得到一个非常错误的动画，它会再次折叠 <code><SearchBar/></code>。</p>
<p>这部分代码在按下 SearchBar 时会调整其大小:</p>
<pre><code>collapseSearchBar = () => {
this.setState({
searchBarCollapsed: !this.state.searchBarCollapsed,
});
};
</code></pre>
<p>这是<code><SearchBar/></code>:</p>
<pre><code><SearchBar
isCollapsed={this.state.searchBarCollapsed}
onCollapse={this.collapseSearchBar}
onSearch={this.search}
/>
</code></pre>
<p>这是<code><ScrollView/></code>的代码:</p>
<pre><code><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
});
}
}}
/>
</code></pre>
<p>我的问题是:我怎样才能让 <code><ScrollView/></code> 调用 <code>onScroll</code> 一次，当用户滑动它时，而不是一直(每 200 毫秒，对于动画开始后大约 3 秒)，同时动画处于 Activity 状态。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>您可以使用 <a href="https://facebook.github.io/react-native/docs/scrollview.html#scrolleventthrottle" rel="noreferrer noopener nofollow"><code>scrollEventThrottle</code></a> prop 设置 <code>scroll</code> 事件触发的频率。</p>
<blockquote>
<p><strong>scrollEventThrottle</strong></p>
<p>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.</p>
</blockquote>
<p>但我认为这不会解决您的问题。您可以做些什么来设置第二个状态值(<em>类似于 <code>isAnimating</code></em>)并在为标题设置动画之前检查它。动画结束后，您可以将其设置回 false。</p>
<p><strong>示例</strong></p>
<pre><code><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
});
}
}}
/>
</code></pre>
<hr/>
<pre><code>collapseSearchBar = () => {
this.interval = setInterval(() => {
if (this.state.isAnimating === false) {
this.setState({
searchBarCollapsed: !this.state.searchBarCollapsed,
isAnimating: true
});
clearInterval(this.interval);
this.interval = null;
}
}, 100)
};
</code></pre></p>
<p style="font-size: 20px;">关于android - 在 React-Native 中滚动一次调用函数，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/49571764/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/49571764/
</a>
</p>
页:
[1]