反应原生:淡入淡出滚动视图底部

Question

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

我想知道是否有一种更优雅、更干净的方法来实现这一目标？

Answer 1

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

2. 如果 ScrollView 有可触摸的项目，请将 prop 'pointerEvents={'none'}' 添加到 LinearGradient。它可以绕过触摸事件到滚动视图。

   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. 如果是动态图像，也许你可以尝试图像父级的背景颜色。下面的示例是黑色的，因此请使用黑色的线性渐变。

   <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>
   

Answer 2

有用于在ScrollView中实现淡入淡出效果的软件包。

rn-faded-scrollview确实工作得很好。

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

希望这有帮助。

Answer 3

你可以使用"fadedingedgelength"道具(仅限Android( https://reactnative.dev/docs/0.63/scrollview#fadingedgelength