React native 反应本机动画：动画颜色更改时更新状态

当动画颜色改变时，我想

更新
状态

当动画从白色变为红色时，我想更新
状态
，并在文本标签中显示更新后的状态


这是我的代码：

export default class AnimationHeader extends React.Component {
  constructor(props) {
    super(props)
  this.state = {
       scrollY:new Animated.Value(0),
       headerColor:'white'
    }
  }

  render() {

    const HeaderHeight = this.state.scrollY.interpolate({
      inputRange: [0, 200],
      outputRange: [120, 120],
      extrapolate: 'clamp'
    })

    const AnimateHeaderBackgroundColor = this.state.scrollY.interpolate({
        inputRange: [ 70, 70  ],
        outputRange: [ 'transparent', 'red'],
        extrapolate: 'clamp'
    })

    return (
      <View

      style={styles.container}>
      <Animated.View style={{width:'100%', height:HeaderHeight, backgroundColor:AnimateHeaderBackgroundColor, alignItems:'center', justifyContent:'center'}}>
      <Text style={{ fontSize:30}}>Animated Header</Text>


      </Animated.View>

       <ScrollView
                  scrollEventThrottle={16}
                  onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
                  style={{width:'100%', backgroundColor:'gray'}}>
                  <View style={{width:'100%', height:1000, backgroundColor:'blue', justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'white', fontSize:30}}>headerColor:</Text>

//////////////////I want to display the updated state here

                    <Text style={{color:'white', fontSize:30}}>white</Text>
                  </View>
       </ScrollView>
      </View>
    );
  }
}

导出默认类AnimationHeader扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
滚动：新的动画值（0），
头部颜色：“白色”
}
}
render（）{
const HeaderHeight=this.state.scrollY.interpolate({
输入范围：[0200]，
输出范围：[120120]，
推断：“钳子”
})
const AnimateHeaderBackgroundColor=this.state.scrollY.interpolate({
输入范围：[70,70]，
outputRange:[“透明”、“红色”]，
推断：“钳子”
})
返回(
动画标题
头部颜色：
//////////////////我想在这里显示更新的状态
白色
);
}
}
我想出来了。根据react本地文档
我可以使用
Animated.Value.addListener
检查我的动画状态

我可以简单地补充：

componentDidMount() {

      this.state.scrollY.addListener(({value}) => {
        if(value > 70){
          this.setState({headerColor:'red'})
          console.log('red')
        }
        if(value<70){
          this.setState({headerColor:'white'})
          console.log('white')

        }
        this._value = value, console.log(value,'value')});
      }

您可以收听动画的值

const animatedListener = this.state.animatedValue.addListener((progress) => {
  this.setState({ progress: progress.value });
  console.log(progress.value)
});

只要记住在完成后删除侦听器

componentWillUnmount() {
  this.state.animatedValue.removeListener(animatedListener);
  //or use for many listeners
  this.state.animatedValue.removeAllListeners()
}


需要注意的是，如果您使用
userNativeDriver
，您将无法收听并始终收到初始值
谢谢您的回答。这真的很有帮助。我有两个问题。1） 我是否将
常量animatedListener
放置在渲染中？2） 删除侦听器的原因是什么？1.未进入渲染到componentDidMount 2.您需要删除侦听器，以便它不会继续侦听并造成内存泄漏3.请确认我的答案（-：
componentWillUnmount() {
  this.state.animatedValue.removeListener(animatedListener);
  //or use for many listeners
  this.state.animatedValue.removeAllListeners()
}