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

发布时间：2020-12-15 16:18:10 所属栏目：百科来源：网络整理

导读：我有一个ScrollView,顶部有一种背景颜色,底部有另一种颜色. 当用户滚动浏览内容并且视图反弹(弹性过度延伸)时,我怎样才能使背景与顶部或底部一致,具体取决于滚动方向？解决方法在iOS上,您可以在ScrollView顶部渲染一个spacer视图,并使用contentInset将其渲

我有一个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上优雅地降级.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!