React-native-router-flux: Animação personalizada para transição de cena

Criado em 9 jul. 2016  ·  3Comentários  ·  Fonte: aksonov/react-native-router-flux

Versão

  • react-native-router-flux v3.26.13
  • reagir-nativo v0.26.3

A animação de mola padrão na transição de cena é um pouco mais lenta do que eu esperava, então estou querendo saber se é possível criar e usar uma animação personalizada. Qualquer ponteiro seria apreciado.

Todos 3 comentários

Oi, aqui está como eu fiz isso para lidar com idiomas rtl (como árabe, para que a transição seja da direita para a esquerda.

  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>
    );

No entanto, ainda não é muito útil, pois as cenas são colocadas em posições especiais, o que significa que a direção da transição deve corresponder ao local onde a próxima cena está.

Como seria de cima para baixo ou vice-versa? parece lidar com apenas 1 dimensão.

Eles já corrigiram esse problema. Tudo que você precisa fazer é fornecer a propriedade direction porque por padrão a direção é rightToLeft.
import { I18nManager } from 'react-native'
let directionSide = I18nManager.isRTL ? 'leftToRight' : null
<Scene key='xXXXX' component={XXXXX} title='XXXXX' direction={directionSide}/>

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

basdvries picture basdvries  ·  3Comentários

sarovin picture sarovin  ·  3Comentários

sreejithr picture sreejithr  ·  3Comentários

tonypeng picture tonypeng  ·  3Comentários

wootwoot1234 picture wootwoot1234  ·  3Comentários