IOS 刷新控件 React Native 的 ProgressViewOffset答案

【问题标题】：ProgressViewOffset for IOS Refresh Control React NativeIOS 刷新控件 React Native 的 ProgressViewOffset
【发布时间】：2019-07-10 11:13:51
【问题描述】：

我有隐藏在滚动条上的标题，所以我使用ProgressViewOffset 在标题下方显示刷新控制加载器。
它在 Android 上运行良好。但在 IOS 中，我们不支持偏移量。但我最终使用了 contentInset 和 contentOffset 但我没有得到它。

          refreshControl: (
        <RefreshControl
          // refreshing
          refreshing={this.props.isloading}
          onRefresh={this.onRefresh}
          progressViewOffset={200}
          />
      ),
      contentInset: {top: 200},
      onMomentumScrollBegin,
      onMomentumScrollEnd,
      onScrollEndDrag,
      ItemSeparatorComponent: this.renderSeparator,
      onScrollEventThrottle: 16,
      automaticallyAdjustContentInsets: false, 
      contentOffset: {x: 0, y: -200},

PS：当我使用 contentContainerStyle 和 contentInset 时，refreshcontrol 和 content 之间有一个空格...

【问题讨论】：

您有什么解决方法吗？
是的。我确实找到了。我会尽快分享代码。

标签： ios react-native scrollview react-native-flatlist

【解决方案1】：

我通过将 HEADER_HEIGHT 传递给 contentInset、contentOffset 并且不使用 contentContainerStyle 来修复它。

<AnimatedScrollView
  contentContainerStyle={{
    paddingTop: Platform.OS === 'ios' ? 0 : HEADER_HEIGHT,
  }}
  scrollEventThrottle={16}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.scrollAnim } } }],
    { useNativeDriver: true }
  )}
  contentInset={{ top: HEADER_HEIGHT }}
  contentOffset={{ x: 0, y: -HEADER_HEIGHT }}
  refreshControl={
    <RefreshControl
      refreshing={this.state.refreshing}
      onRefresh={this.onrefresh}
      progressViewOffset={HEADER_HEIGHT}
    />
  }
  automaticallyAdjustContentInsets={false}

</AnimatedScrollView>

在 Snack 上运行代码：https://snack.expo.io/@legowtham/9c7a01

PS：当我们使用自定义动画标题时，下拉刷新加载器会导致标题在加载器停止后反弹。如果您不喜欢这个动画问题，请使用 Animated.diffClamp 来避免这种情况。这篇文章可能有用：https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

【讨论】：