我正在尝试实现一个 ScrollView
列表,使列表中底部的项目逐渐消失。这可以通过监视滚动位置、确定每个项目的布局,然后为每个项目添加不透明度来实现 ~ 即使如此,由于每个项目都有固定的不透明度,它也无法实现平滑淡出效果。
我想知道是否有更优雅、更清晰的方法来实现这个功能?
我正在尝试实现一个 ScrollView
列表,使列表中底部的项目逐渐消失。这可以通过监视滚动位置、确定每个项目的布局,然后为每个项目添加不透明度来实现 ~ 即使如此,由于每个项目都有固定的不透明度,它也无法实现平滑淡出效果。
我想知道是否有更优雅、更清晰的方法来实现这个功能?
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>
编辑:
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>
有一个用于实现ScrollView
淡入淡出效果的包。
rn-faded-scrollview表现良好。
<RNFadedScrollView
allowStartFade={true}
allowEndFade={true}
bounces={false}
horizontal={true}
>
</RNFadedScrollView>