我有隐藏在滚动条上的标题,因此我使用ProgressViewOffset在标题下方带出刷新控制加载器。
在Android上运行正常。但是在IOS中,我们不支持偏移。但是我最终使用了contentInset和contentOffset,但没有得到。

ios - IOS刷新控制React Native的ProgressViewOffset-LMLPHP

          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之间有一个空格。

最佳答案

我通过将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

10-08 05:42
查看更多