Блог

В приложении React Native при условии true , что я должен визуализировать ComponentA , ComponentB вместо этого должно быть видно другое.

 const ParentComponent = () =gt; {  if (condition) return lt;ComponentA /gt;  if (!condition) return lt;ComponentB /gt; }  

Проблема, с которой я сталкиваюсь, заключается в том, что, как только условие изменится, я должен анимировать переход между компонентами, т. Е. ComponentA Должен исчезать и ComponentB должен исчезать.

Итак, у ComponentA меня есть что-то вроде этого:

 useEffect(() =gt; {  return () =gt; {  Animated.timing(fadeAnim, {  useNativeDriver: true,  toValue: 0,  duration: 1000,  }).start();  })  } }   

Это означает, что, когда компонент собирается размонтировать, он должен запустить анимацию затухания. Однако это не работает, поскольку к моменту запуска анимации компонент уже исчез, поскольку условие, позволяющее его визуализацию, уже изменилось, и вместо него теперь отображается другой компонент (см. Первый фрагмент кода).

Есть ли способ анимировать размонтирование компонента без каких-либо дополнительных библиотек?

В качестве обходного пути я рендеринг как компонентов, так и изменять их непрозрачность: я выполнил условие, чтобы оба из них в качестве опоры, так что при условии изменения они могут обрабатывать анимацию непрозрачности изменить себя, но мне не нравится это решение, поскольку мне нужно сделать оба компонента позицию абсолютной и их наложение друг на друга, в идеале я хотел бы сохранить состояние, которое управляет их оказания и ComponentA размонтировать с затемнение. Возможно ли это?