Question

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

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

Answer 1

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

如果ScrollView具有可触摸的项目，则将道具'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>

编辑：

如果它是动态图像，则可以尝试使用图像父级的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>

Answer 2

ScrollView中提供了用于实现淡入淡出效果的软件包。

rn-faded-scrollview确实不错。

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

希望这会有所帮助。

react-native：淡化ScrollView底部

2 个答案: