React Native: Обновите позицию просмотра за два хода

#react-native #animation #layout-animation

Вопрос:

У меня есть представление с преобразованием и абсолютной позицией, и я хочу установить положение представления для его преобразования, а затем активировать LayoutAnimation.

это означает, что я хотел бы установить положение вида на X, и после того, как положение будет установлено, настройте LayoutAnimation и установите его положение на Y.

 class someComponent extends React.Component {  state: {  transform: 100,  top: 0  }   someFunction = () =gt; {  this.setState({ top: this.state.transform, transform: 0 });  LayoutAnimation.configureNext( someAnimationConfig );  this.setState({ top: 500 });  }   render = () =gt; {  return(  lt;View style={  someStyles,   {  transform: [ { translateY: this.state.transform } ],  top: this.state.top  }   }gt;    lt;/Viewgt;  )  }  }  

требуемое поведение при вызове someFunc заключается в том, чтобы представление установило свою позицию в соответствии с преобразованием и сбросило преобразование (что является чисто техническим и не имеет визуального эффекта), а затем запустило анимацию

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

другой способ решить мою проблему-оставить преобразование и переместить экран (wantedPosition - currentTransform) , но это кажется уродливым , и я блуждал, есть ли более чистый и элегантный способ справиться с этой ситуацией

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

некоторые сотрудники, которых я пробовал

  • calling the second set state and animation config in the callback of the first setState, same behavior
  • добавление двух объектов LAYOUTANIMATIOM, установка первой анимации «мгновенной» (задержка 0) и вызов ее после первого заданного состояния, а также вызов второй со вторым заданным состоянием в didAnimationFinish обратном вызове. этот был близок к работе, но проблема заключалась в том, что первая анимация не была мгновенной, вы не можете установить задержку 0, а при установке задержки 1 вы можете видеть представление с позицией 0 и преобразованием 0 для одного кадра, и после завершения первой анимации возникает небольшая задержка перед запуском второй анимации. хотя я верю, что есть способ избавиться от небольшой задержки перед второй анимацией, у вас все равно будет один «прослушиваемый» кадр