RefreshControl仅在水平滚动视图(iOS)中出现在第一个孩子的顶部

问题描述:

我有一个用例,我想列出水平卡片。 我用水平的ScrollView实现了它。RefreshControl仅在水平滚动视图(iOS)中出现在第一个孩子的顶部

然后,对于每张卡,我想执行拉到刷新模式,以便更新卡中显示的数据。 因此,我使用RefreshControl组件作为ScrollView的属性。

问题是,在iOS上,当我切换到第一张以外的另一张卡时,我看不到RefreshControl组件(请参见下面的gif)。

horizontal scroll with refresh control iOS

代码

<ScrollView 
    contentContainerStyle={styles.container} 
    horizontal 
    pagingEnabled 
    showsHorizontalScrollIndicator={false} 
    directionalLockEnabled 
    contentInset={{top: 1}} 
    refreshControl={ 
    <RefreshControl 
     refreshing={this.state.isRefreshing} 
     onRefresh={this._onRefresh.bind(this)} 
    /> 
    } 
> 
    <Text style={styles.card}>First child</Text> 
    <Text style={styles.card}>Second child</Text> 
</ScrollView> 

在演示的完整代码如下

演示https://rnplay.org/apps/sRXpEw

编辑

它看起来关系到这部分代码:Libraries/Components/ScrollView/ScrollView.js#L523-L529

据我所知,这是预期的行为refreshControl - 只存在应该是一个。

这会适用于您的应用程序?

<ScrollView 
    contentContainerStyle={styles.container} 
    horizontal 
    pagingEnabled 
    showsHorizontalScrollIndicator={false} 
    directionalLockEnabled 
    contentInset={{top: 1}} 
> 
    <ScrollView 
    refreshControl={ 
     <RefreshControl 
     refreshing={this.state.isRefreshing} 
     onRefresh={this._onRefresh.bind(this)} 
     /> 
    }><Text style={styles.card}>First child</Text></ScrollView> 
    <ScrollView 
    refreshControl={ 
     <RefreshControl 
     refreshing={this.state.isRefreshing} 
     onRefresh={this._onRefresh.bind(this)} 
     /> 
    }><Text style={styles.card}>Second child</Text></ScrollView> 
</ScrollView>