React-native-router-flux: Пользовательская анимация для перехода между сценами

Созданный на 9 июл. 2016 · 3Комментарии · Источник: aksonov/react-native-router-flux

Версия

реакция-родной поток-маршрутизатор v3.26.13
реагировать родной v0.26.3

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

Источник

VictorK1902

👍3

Все 3 Комментарий

Привет, вот как я это сделал для обработки rtl-языков (таких как арабский, чтобы переход был справа налево.

  rtlAwareAnimation(pos, navState) {
    const factor = I18n.rtl() ? -1 : 1;
    Animated.spring(
      pos,
      {
        bounciness: 0,
        toValue: factor*navState.index,
      }
    ).start();
  },

  render() {
    return (
      <Router>
        <Scene key="signIn" component={SignIn} title={I18n.t('signIn')} initial={true} applyAnimation={this.rtlAwareAnimation} />
        <Scene key="dashboard" component={Dashboard}applyAnimation={this.rtlAwareAnimation} />
      </Router>
    );

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

wrousseau 9 июл. 2016

😕2 👍1

Как это будет сверху вниз или наоборот? кажется, он обрабатывает только 1 измерение.

jsdario 2 окт. 2016

👍1

Они уже исправили эту проблему. Все, что вам нужно сделать, это предоставить свойство direction , потому что по умолчанию направление справа налево.
import { I18nManager } from 'react-native'
let directionSide = I18nManager.isRTL ? 'leftToRight' : null
<Scene key='xXXXX' component={XXXXX} title='XXXXX' direction={directionSide}/>