18

我有ScrollView一个顶部带有一种背景颜色和底部带有另一种不同颜色的顶部。

当用户滚动内容并且视图反弹（弹性过度扩展）时，我怎样才能使背景与顶部或底部一致，具体取决于滚动方向？

4

5 回答 5

32

我不会玩 ScrollView 的contentInsetand contentOffset，就好像你的内容发生了变化一样，它可能会改变你的滚动视图的位置。

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

// const spacerHeight = 1000;

<ScrollView>
  {Platform.OS === 'ios' && (
    <View 
      style={{
        backgroundColor: 'red',
        height: spacerHeight,
        position: 'absolute',
        top: -spacerHeight,
        left: 0,
        right: 0,
      }} 
    />
  )}
</ScrollView>
于 2018-11-12T19:03:16.370 回答
14

View在 iOS 上，您可以在 顶部渲染一个间隔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>
  );
}

因为contentInset和contentOffset仅适用于 iOS，所以此示例适用于在 Android 上优雅降级。

于 2016-11-01T19:05:15.353 回答
7

接受的解决方案对我来说效果不佳，因为我需要放置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>
  );
};

以下是你如何使用它：

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

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

于 2019-08-21T18:13:30.667 回答
1

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

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

您可以根据自己的喜好调整高度/底部绝对值，具体取决于您认为用户可以滚动多远。

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

于 2022-01-24T01:21:25.420 回答
1

对我来说，最简单的解决方案是基于Sebastien Lorber答案的修改，它不包括包装，只是在 ScrollView 组件之前（或之后）调用它：

创建组件：

interface IScrollViewBackgroundLayer {
  topBounceColor: string;
  bottomBounceColor: string;
}

export const ScrollViewBackgroundLayer = ({
  topBounceColor,
  bottomBounceColor,
}: IScrollViewBackgroundLayer): ReactElement => (
  <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>
);

并像这样使用它：

  return (
    <SafeAreaView style={styles.container}>
      <ScrollViewBackgroundLayer topBounceColor={topBounceColor} bottomBounceColor={bottomBounceColor} />
      <ScrollView>
       ...
      </ScrollView>
    </SafeAreaView>
于 2021-11-11T12:49:16.437 回答