react-native：淡入淡出ScrollView底部

Question

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

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

Answer 1

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

2. 如果 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>
   

编辑：

3. 如果是动态图像，也许你可以尝试图像父级的backgroundColor。下面的例子是黑色的，所以使用黑色的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>