React Native：如何在 ScrollView/ListView 子项进入/离开视口时为其设置不透明度动画？

Posted 2023-03-15

【中文标题】React Native：如何在 ScrollView/ListView 子项进入/离开视口时为其设置不透明度动画？

【英文标题】：React Native: How to animate opacity of ScrollView/ListView children as they enter/leave the viewport?

【发布时间】：2016-10-14 01:01:46

【问题描述】：

这是如何在 React Native 中完成的？我试过使用可触摸的不透明度，但它不起作用。而且，似乎没有关于如何在 ScrollView 中执行此操作的文档。

谢谢你:)

【参考方案1】：

您可以通过使用动画来做到这一点。

查看以下文档中的第一个示例。

https://facebook.github.io/react-native/docs/animated.html

【参考方案2】：

您将需要创建一个自定义 Item 组件，该组件在 componentDidMount 上运行动画。例如，如果您有一个用户列表，则列表中的每个项目都应该是一个 UserItem 组件。

class UserItem extends Component 

  componentWillMount() 
    this.animatedValue = new Animated.Value(0);
  

  componentDidMount() 
    this.startAnimation()
  

  startAnimation() 
    Animated.timing(this.animatedValue, 
       toValue  : 1,
       duration : 500,
    ).start()
  

  render() 
    return (
       <Animated.View
         style=[someStyles,  opacity: this.animatedValue ]
       >
         <AnyThingYouNeedHere />    
       </Animated.View>
    );
  

然后在您的列表中您只需要使用UserItem。您可能希望为每个项目或其他内容添加一些延迟。

这是一个很棒的教程，向您展示了如何在添加/删除项目时添加动画。

http://moduscreate.com/react-native-dynamic-animated-lists/

祝你好运！

【讨论】：

会试试这个。谢谢。