Javascript 2种不同的背景色可用于滚动视图反弹

我有一个

滚动视图

，它的顶部有一种背景颜色，底部有另一种不同的颜色

---

当用户滚动内容，视图反弹（弹性过伸）时，如何使背景与顶部或底部一致，具体取决于滚动方向？

在iOS上，您可以在

滚动视图

顶部渲染间隔

视图

，并使用

内容插入

进行渲染“屏幕外”，

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>
  );
}

render（）{
const isIos=Platform.OS=='ios'
常量间隔符_SIZE=1000；//任意大小
const TOP_COLOR='白色'；
const BOTTOM_COLOR=‘木瓜鞭’；
返回(
{isIos&&}
//…您的内容在这里
);
}

---

由于

contentInset

和

contentOffset

仅限于iOS操作系统，因此此示例在Android上会被优雅地降级。

我不会玩ScrollView的

contentInset

和

contentOffset

，因为如果您的内容发生变化，它可能会改变您的ScrollView的位置

只需在ScrollView的顶部添加一个视图，即可完成非常简单的操作：

// const spacerHeight = 1000;

<ScrollView>
  {Platform.OS === 'ios' && (
    <View 
      style={{
        backgroundColor: 'red',
        height: spacerHeight,
        position: 'absolute',
        top: -spacerHeight,
        left: 0,
        right: 0,
      }} 
    />
  )}
</ScrollView>

//常数间隔高度=1000；
{Platform.OS==='ios'&&(
)}

接受的解决方案对我来说效果不好，因为我需要将

flexGrow:1

放在contentContainerStyle上。使用插入/偏移并不能使内容按我想要的方式增长，否则效果就不太好了

我有另一个解决方案建议：在透明的ScrollView下放置一个双色背景层，并为ScrollView内容添加颜色。这样，在ios bounce上，ScrollView下的双色层就会显示出来

这就是我所说的双色层（这里的滚动视图是空的和透明的）

现在，如果我放回ScrollView子项（如果主体背景为空白，页脚背景为黄色），我会得到以下结果：

只要反弹不超过scrollview高度的50%，就会看到适当的背景色

这里有一个组件可以用来包装滚动视图

const AppScrollViewIOSBounceColorsWrapper = ({
  topBounceColor,
  bottomBounceColor,
  children,
  ...props
}) => {
  return (
    <View {...props} style={[{ position: 'relative' }, props.style]}>
      {children}
      <View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          zIndex: -1, // appear under the scrollview
        }}
      >
        <View
          style={{ flex: 1, backgroundColor: topBounceColor }}
        />
        <View
          style={{ flex: 1, backgroundColor: bottomBounceColor }}
        />
      </View>
    </View>
  );
};

const AppScrollViewIOSBunceColorsRapper=({
topBounceColor，
底色，
儿童
…道具
}) => {
返回(
{儿童}
);
};

下面是您如何使用它：

  <AppScrollViewIOSBounceColorsWrapper
    style={{flex: 1}}
    topBounceColor="white"
    bottomBounceColor="yellowLancey"
  >
    <ScrollView style={{flex: 1}}>
      <WhiteBackgroundBody/>
      <YellowBackgroundFooter />
    </AppScrollView>
  </AppScrollViewIOSBounceColorsWrapper>

---

确保不要为scrollview设置背景色，否则双色层将永远不会显示自己（contentContainerStyle上的背景色是可以的）

嘿，有没有办法更改列表右侧显示的滚动条或滚动指示器的颜色。如果出现垂直滚动？我可能说得太快了…这只适用于iOS。我必须调整此解决方案，使其仅适用于iOS。此解决方案对我来说效果不太好，因为插入/偏移会弄乱我的内容tContainerStyle flexGrow 1=>内容增长不正常。请检查另一个可能更容易应用于多个位置的解决方案：更简单，谢谢。我在实现接受的答案后尝试了此解决方案，感觉好多了。接受的答案莫名其妙地导致我在ScrollView中的一些内容消失。我这应该是一个被接受的答案。作为一个巨大的额外奖励，这个方法，你可以把内容放在反弹区域（在我的例子中，我添加了一个渐变。它看起来很不错）.虽然，当与FlatList一起使用时，这与RefreshControl不起作用？请注意，此绝对视图将覆盖刷新指示器…我最终将其放在底部