Animated и getDerivedStateFromProps
Если componentWillReceiveProps устарел, а заменяющий getDerivedStateFromProps возвращает состояние окончательный, как я могу постепенно изменять состояние с течением времени (то есть анимировать что-то) с новым getDerivedStateFromProps?
с componentWillReceiveProps нормально работает следующее:
state = {
itemOpacity: new Animated.Value(0.25)
};
componentWillReceiveProps(nextProps) {
if (this.props.items.visible !== nextProps.items.visible) {
let value = 0;
if (nextProps.items.visible) {
value = 1;
}
Animated.timing(this.state.itemOpacity, {
toValue: value,
duration: 200,
}).start();
}
}
как мне сделать что-то подобное с getDerivedStateFromProps? или мой шаблон анимации тупой?
Ответы 2
getDerivedStateFromProps вызывается с аргументами newProps и previousState. Итак, вы можете использовать previousState для анимации:
static getDerivedStateFromProps(nextProps, prevState) {
let value = 0;
if (nextProps.items.visible) {
value = 1;
}
Animated.timing(prevState.itemOpacity, {
toValue: value,
duration: 200,
}).start();
return {
// update state
}
}
prevState является неизменным, но пакет Animated не изменяет состояние. Фактически, я бы посоветовал не использовать состояние для анимации, поскольку состояние актуально только в том случае, если вы явно обновляете его через setState ()
спасибо, попробую позже. но как Animated.timing(prevState.itemOpacity ... не изменяет состояние? после этого я могу видеть новое значение в состоянии с this.state.itemOpacity._value.
Да, значение обновляется, но оно также будет обновлено, если вы не использовали состояние. Так что мое предыдущее утверждение не было полностью правильным. Но анимированная библиотека не использует состояние за кулисами, она просто обновляет переменную, которую вы ей предоставляете.
я понимаю, спасибо за разъяснения. к сожалению, анимация prevState на самом деле не отображает анимацию. ваше предложение - определить объект вне состояния / компонента (let animations = {opacity: new Animated.Value(0.25) };), а затем запустить Animated.timing(animations.opacity ... на этом объекте?
Да, просто определите переменную внутри своего конструктора, например. this.opacity = новый Animated.Value (0,25); (вам не нужно let animated = ...), а затем указать его в своей анимации: Animated.timing (this.opacity ...)
как я могу вернуть состояние после завершения анимации в getDerivedStateFromProps? Как вернуть состояние в функции обратного вызова?
Простой ответ - просто не использовать состояние для анимации (спасибо dentemm за помощь):
itemOpacity = new Animated.Value(0.25);
class TestScreen extends Component {
getDerivedStateFromProps(nextProps) {
let value = 0;
if (nextProps.items.visible) {
value = 1;
}
Animated.timing(itemOpacity, {
toValue: value,
duration: 200,
}).start();
return null;
}
}
Рад, что все получилось! Я бы просто предложил сделать itemOpacity членом вашего класса компонентов по причинам управления памятью. В приведенном выше примере происходит утечка памяти.
@dentemm Это невозможно, поскольку getDerivedStateFromProps фактически статичен.
могу я просто запустить анимацию в предыдущем состоянии? Я предположил, что
prevStateнеизменен и не отображает текущее состояние. Кроме того, что мне нужно вернуть?