React native 切换动画值以淡入/淡出视图

我试图通过处理按钮点击来切换视图的不透明度和动画值，但是我没有得到想要的结果，除了第一次点击按钮，它会淡出（不透明度=0），但是当我再次按下按钮时，什么都没有发生，我看不到我的视图。代码如下：

export default class App extends React.Component {
  state = {
    animation: new Animated.Value(1)
  }
  startAnimation = () => {
    const { animation } = this.state
    Animated.timing(animation, {
      toValue: animation === 0 ? 1 : 0,
      duration: 1000
    }).start()
  }
  render() {
    const animatedStyle = {
      opacity: this.state.animation
    }
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} />
        <Button title="Toggle fade" onPress={this.startAnimation} />
      </View>
    );
  }
} .  

导出默认类App扩展React.Component{
状态={
动画：新动画。值（1）
}
startAnimation=（）=>{
const{animation}=this.state
动画。计时（动画{
toValue:animation==0？1:0，
持续时间：1000
}).start（）
}
render（）{
常量animatedStyle={
不透明度：this.state.animation
}
返回(
);
}
} .  

有人知道我做错了什么吗

---

谢谢

我认为这是因为您没有更改动画值的状态，而这个

const{animation}=this.state

将始终具有相同的值，并且

toValue:animation==0？1:0，

也将具有相同的值。我试图向您展示我在项目中是如何做到这一点的，但您必须根据自己的需要进行更新

export default class App extends React.Component {
  state = {
    animation: new Animated.Value(1),
    isVisible: false   //add a new value to check your state
  }
  startAnimation = () => {
    const { isVisible } = this.state
    Animated.timing(animation, {
      toValue: isVisible === 0 ? 1 : 0,
      duration: 1000
    }).start(() => {
         this.setState({ isVisible: !this.state.isVisible });//set the new state, so the next click will have different value
    })
  }
  render() {
    const animatedStyle = {
      opacity: this.state.animation
    }
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.box, animatedStyle]} />
        <Button title="Toggle fade" onPress={this.startAnimation} />
      </View>
    );
  }
} .  

---

可能尝试提取要更改的值。

多亏@oma，我才能够使其正常工作，以下是小吃：

除此之外，我还发现了一篇关于此功能的好文章，可以重用此功能：

下面是工作示例的要点，稍作修改

这个解决方案看起来很不错，希望您能从中受益。

我制作了一个节点包，可以用动画值切换视图的不透明度。您可以查看源代码以了解它是如何完成的，但这里有一个简化版本：

import React，{PureComponent}来自'React'；
从“react native”导入{Animated}；
导出默认类FadeInOut扩展PureComponent{
状态={
fadeAnim:新的动画.Value（this.props.visible？1:0），
};
componentDidUpdate（prevProps）{
if（prevProps.visible！==此.props.visible）{
动画。计时（this.state.fadeAnim{
toValue:prevProps.visible？0:1，
持续时间：300，
}).start（）；
}
}
render（）{
返回(
{this.props.children}
);
}
}

感谢您的建议，但它仍然不起作用，我甚至尝试将此.setState（（prevState，props）=>（{isVisible:！prevState.isVisible}））放在start（）方法的回调中，但结果相同。还有一些别的东西我想不出来…我想我们错过了一些东西，我正在我的项目中使用它，它正在工作。。。我再看一次。如果你有一个有效的例子，你能在零食中分享吗？谢谢很好，你找到的那些文章也很好。我们错过了什么问题？是的，没错。我在下面的文章中看到了

start

completion处理程序中的setState，它非常有用。我会更新这个答案，为其他人提供更好的解决方案。谢谢你，伙计。

let val = this.state.sliderOpen ? 0.8 : 0;

    Animated.timing(                  // Animate over time
      this.state.sliderAnimation,            // The animated value to drive
      {
        toValue: val,                   // Animate to opacity: 1 (opaque)
        duration: 5,              // Make it take a while
      }
    ).start(); 
 this.setState({
   sliderOpen : !this.state.sliderOpen 
})