Можно ли анимировать вид при обновлении состояния в родном реагировании

У меня есть сценарий, в котором я не могу использовать scrollview или flatlist.
Пользовательский интерфейс представляет собой своего рода мастер, когда я нажимаю «Далее», я перемещаю пользователя на следующий экран или предыдущий на задний план. В функции рендеринга у меня есть:

<View style={{flex: 1}}>
   <WizardItem data={this.props.currentStep} />
</View>

Компонент WizardItem имеет button, внутри которого обновляется this.props.currentStep, и когда он обновляется в редюсере, он естественным образом обновляется здесь.

Но мне нужно анимировать переход, например, текущий шаг идет влево, а новый идет справа, и наоборот.< br/>
Как видите, шаг полностью динамический, поэтому я не могу загрузить его в списки, так как я не знаю, пока пользователь не нажмет кнопку «Далее», что будет следующим элементом.
Но мне нужна эта анимация.

Может ли кто-нибудь подсказать мне, как сделать этот эффект, или я должен перестать думать об этом, если это невозможно?



ОБНОВЛЕНИЕ

Ниже приведен пример чего-то подобного, просто без вращения, простое перемещение влево вправо.
Но я не могу использовать представления, в которых у меня есть список элементов, предопределенный как следующий и предыдущий шаг в мастере являются динамическими.

введите здесь описание ссылки


react-native reactjs react-animated
person 1110    schedule 13.02.2019    source источник
comment
вы можете добавить счетчик onClick(), но я бы не рекомендовал. Еще вы можете проверить, работает ли nextProps != this.props счетчик.   -  person roottraveller    schedule 13.02.2019
comment
Нет. Мне нужно, чтобы это выглядело так же, как когда у вас есть элементы в плоском списке и когда вы прокручиваете до следующего элемента.   -  person 1110    schedule 13.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

Если я правильно понимаю, вы хотите, чтобы это перешло на другой экран. Для этого я предлагаю вам использовать LayoutAnimation в React Native. LayoutAnimation позволяет анимировать изменения состояния, а не просто исчезать и появляться. Вы можете сохранить текущий шаг в состоянии вместо реквизита, и каждый раз, когда состояние изменяется, используйте LayoutAnimation для перехода так, как вы хотите.

В этой статье для переходов между экранами используется анимация макета

Если вы не можете или не хотите делать изменение состояния из реквизита, вы также можете обнаружить изменения реквизита в своем мастере, а затем использовать Animated для перемещения макетов.

Трудно предложить лучший способ, не зная, как устроен Wizard или хотя бы его общий вид. Если есть возможность поделиться кодом для Wizard, вам будет легче помочь.

person Nemi Shah    schedule 13.02.2019
comment
Я обновил вопрос с примером. Там действительно другой код. Когда текущий шаг в редукторе обновляется на основе его компонента типа, этот шаг в мастере выглядит совсем по-другому. Проблема в том, что когда я обновляю текущий шаг, экран только что обновился, без перехода или анимации, и мне нужно, чтобы он выглядел так, как будто пользователь движется вперед или назад. Возможно ли это реализовать, просто обновив редуктор? - person 1110; 13.02.2019
comment
Как сейчас отображаются динамические шаги? Простая замена всего представления? Кроме того, даже когда это динамично, вы знаете порядок шагов или это тоже может измениться? Извините за все вопросы, просто хочу помочь, чем могу - person Nemi Shah; 13.02.2019
comment
Да, точно так же, как в примере, это просто замена в этом представлении при обновлении редуктора. Да, когда я нажимаю «Далее», я вычисляю следующий элемент, он динамический - person 1110; 13.02.2019
comment
Одна вещь, о которой я могу думать, это иметь 3 просмотра одновременно, а не только один. В основном это будет текущий шаг на экране, предыдущий шаг слева от экрана и следующий шаг справа от экрана. Когда ваше состояние изменяется со значением шага, вы просто используете Animated для перемещения в нужном вам направлении, а затем соответствующим образом перерисовываете шаги вне экрана. - person Nemi Shah; 13.02.2019