我对Animated.Text动画有问题-我想根据道具上提供的错误的存在来更改不透明度。
Animated.Text在不透明度从0变为1时按预期方式工作,但是它不执行相反变化的动画(1 => 0)-它消失了。
class FloatingLabelInput extends Component {
constructor(props) {
super(props)
this.state = {
isFocused: false,
value: '',
}
this._animatedIsFocused = new Animated.Value(this.state.value == '' || this.state.value === null ? 0 : 1)
this._animatedErrorVisibility = new Animated.Value(this.props.error ? 1 : 0)
}
componentDidUpdate = () => {
const { isFocused, value } = this.state
const { error } = this.props
Animated.timing(this._animatedIsFocused, {
toValue: (isFocused || value) ? 1 : 0,
duration: 200,
}).start()
Animated.timing(this._animatedErrorVisibility, {
toValue: error ? 1 : 0,
duration: 500,
}).start()
}
createErrorTextStyle = () => {
return {
opacity: this._animatedErrorVisibility
}
}
render() {
const { label, error, ...props } = this.props
return (
<View style={{ paddingTop: 18, marginTop: 15, marginBottom: 15, width: 230 }}>
<Animated.Text style={this.createErrorTextStyle()}>{error}</Animated.Text>
</View>
)
}
}
有什么建议可以使它正常工作吗?
谢谢!