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

Question

我有一个用例，我想水平列出卡片。我用水平 ScrollView.

实现了它

然后，我想为每张卡片实现下拉刷新模式，以便更新卡片中显示的数据。因此，我使用 RefreshControl 组件作为 ScrollView 的属性。

问题是在 iOS 上，当我切换到另一张卡而不是第一张时，我看不到 RefreshControl 组件（见下面的 gif）。

代码

<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

Answer 1

据我所知，这是 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>

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

RefreshControl only appearing on top of first child in a horizontal ScrollView (iOS)

ios

uiscrollview

react-native

pull-to-refresh

uirefreshcontrol