react-native – 用于ScrollView弹跳的2种不同背景颜色

我有一个ScrollView,顶部有一种背景颜色,底部有另一种颜色.

当用户滚动浏览内容并且视图反弹(弹性过度延伸)时,我怎样才能使背景与顶部或底部一致,具体取决于滚动方向？

在iOS上,您可以在ScrollView顶部渲染一个spacer视图,并使用contentInset将其渲染为“屏幕外”,contentOffset设置初始滚动位置以抵消插入：

render() {
  const isIos = Platform.OS === 'ios'
  const SPACER_SIZE = 1000; //arbitrary size
  const TOP_COLOR = 'white';
  const BOTTOM_COLOR = 'papayawhip';
  return (
    <ScrollView
      style={{backgroundColor: isIos ? BOTTOM_COLOR : TOP_COLOR }}
      contentContainerStyle={{backgroundColor: TOP_COLOR}}
      contentInset={{top: -SPACER_SIZE}}
      contentOffset={{y: SPACER_SIZE}}>

      {isIos && <View style={{height: SPACER_SIZE}} />}
      //...your content here

    </ScrollView>
  );
}

因为contentInset和contentOffset仅适用于iOS,所以此示例的条件是在Android上优雅地降级.