react-native:淡出 ScrollView 底部

Question

我正在尝试实现 ScrollView淡出列表中底部项目的列表。这可以通过监视滚动位置，确定每个项目的布局，然后为每个项目添加不透明度来实现 ~ 即使这样，它也不会实现平滑淡入淡出，因为每个项目都有固定的不透明度。

我想知道是否有更优雅和更清洁的方法来实现这一目标？

Answer 1

使用 expo 中的 LinearGradient 来渲染平滑的淡出效果。

如果 ScrollView 有可触摸项，将 prop 'pointerEvents={'none'}' 添加到 LinearGradient。它可以将触摸事件绕过到 ScrollView。

import {LinearGradient} from 'expo';

<View style={{width:100, height:100, backgroundColor:'#fff'}}>
  <ScrollView />
  <LinearGradient
    style={{position:'absolute', bottom:0, width:100, height:20}}
    colors={['rgba(255, 255, 255, 0.1)', 'rgba(255, 255, 255, 0.8)']}
    pointerEvents={'none'}
  />
</View>

编辑:

如果是动态图像，也许您可​​以尝试图像父级的背景颜色。下面的例子是黑色的，所以使用黑色的 LinearGradient。

<View style={{flex:1, backgroundColor:'#000'}}>
  <ImageBackground
    style={{flex:1}}
    source={{uri:'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?cs=srgb&dl=beauty-bloom-blue-67636.jpg&fm=jpg'}}
  >
    <LinearGradient
      style={{flex:1}}
      locations={[0.7, 0.9, 1]}
      colors={['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.5)']}
      pointerEvents={'none'}
    />
  </ImageBackground>
</View>