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

Question

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

谢谢：）

Answer 1

您可以使用动画来完成此操作。

检查下面文档中的第一个示例。

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

Answer 2

您需要创建一个在componentDidMount上运行动画的自定义Item组件。例如，如果您有用户列表，则列表中的每个项目都应为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/

祝你好运！