React Native：渐变滚动视图底部

Question

我正在尝试实现一个 ScrollView 列表，使列表中底部的项目逐渐消失。这可以通过监视滚动位置、确定每个项目的布局，然后为每个项目添加不透明度来实现 ~ 即使如此，由于每个项目都有固定的不透明度，它也无法实现平滑淡出效果。

我想知道是否有更优雅、更清晰的方法来实现这个功能？

- Anshuul Kai

---

我也对此很感兴趣。你在这之外找到其他解决方案了吗？我也不确定如何做到这一点。 - user2078023

Answer 1

1. Use LinearGradient from expo to render a smooth fadeout.

2. If ScrollView has touchable item, add prop 'pointerEvents={'none'}' to LinearGradient. It can bypass touch events to 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. If it is dynamic images, maybe you can try the backgroundColor of image's parent. The following example is black, so use black 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>
   

- Dwyane Lin

---

一个适用于使用纯色背景的应用程序的美妙技巧。无法与动态背景（如图像等）一起使用。 - Anshuul Kai

Answer 2

有一个用于实现ScrollView淡入淡出效果的包。

rn-faded-scrollview表现良好。

 <RNFadedScrollView
    allowStartFade={true}
    allowEndFade={true}
    bounces={false}
    horizontal={true}
     >
 </RNFadedScrollView>

希望这可以帮到你。

- Abdul Kawee

Answer 3

你可以使用 "fadingedgelength" 属性（仅适用于 Android） https://reactnative.dev/docs/0.63/scrollview#fadingedgelength

- Danny Michaeli