ScrollView弹跳的2种不同背景颜色

Ale*_*tis 6 javascript react-native react-native-ios

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

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

ale*_*ngn 10

我不会像ScrollView 的contentInset和那样玩,contentOffset就好像您的内容更改了一样,它可能会更改滚动视图的位置。

您可以通过在ScrollView的最顶部添加一个View来做一些非常简单的事情:

// const spacerSize = 1000;

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

  • 请注意,这个绝对视图将掩盖刷新指示器...我最终将其放在底部 (4认同)
  • @GregT 是的,我知道!不管怎样谢谢你的回答!我最终使用“zIndex: 1”作为“RefreshControl” (2认同)

jev*_*lio 8

在iOS上,您可以View在其上方渲染一个spacer ScrollView,并使用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>
  );
}
Run Code Online (Sandbox Code Playgroud)

因为contentInsetcontentOffset仅适用于iOS,这个例子的条件是在Android上正常降级.


Seb*_*ber 6

接受的解决方案对我来说效果不佳,因为我需要穿上flexGrow: 1contentContainerStyle。使用 insets/offsets 并没有让内容按照我想要的方式增长,否则它的效果还不错。

我有另一个建议的解决方案:在透明的 ScrollView 下放置一个双色背景层,并为您的滚动视图内容添加颜色。这样,在 ios 弹跳时,滚动视图下的双色层就会显示出来。

这就是我所说的双色层的意思(这里的滚动视图是空的和透明的)

在此处输入图片说明

现在,如果我放回 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>
  );
};
Run Code Online (Sandbox Code Playgroud)

以下是您如何使用它:

  <AppScrollViewIOSBounceColorsWrapper
    style={{flex: 1}}
    topBounceColor="white"
    bottomBounceColor="yellowLancey"
  >
    <ScrollView style={{flex: 1}}>
      <WhiteBackgroundBody/>
      <YellowBackgroundFooter />
    </AppScrollView>
  </AppScrollViewIOSBounceColorsWrapper>
Run Code Online (Sandbox Code Playgroud)

确保不要为滚动视图设置背景颜色,否则双色层永远不会显示自己(contentContainerStyle 上的背景颜色很好)


小智 6

我认为这是我发现的最愚蠢的简单方法:

<ScrollView style={{backgroundColor: '#000000'}}>
  [...]
  <View style={{position: "absolute", bottom: -600, left: 0, right: 0, backgroundColor: '#FFFFFF', height: 600}}/>
</ScrollView>
Run Code Online (Sandbox Code Playgroud)

您可以根据您的喜好调整高度/底部绝对值,具体取决于您认为用户可以滚动的距离。

我亲自将其实现为一个<ScrollBottom color={"white"}/>组件,以便于在我的所有 ScrollView 中使用