React-native-router-flux: シーントランジションのカスタムアニメーション

作成日 2016年07月09日  ·  3コメント  ·  ソース: aksonov/react-native-router-flux

バージョン

  • react-native-router-flux v3.26.13
  • react-native v0.26.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>
    );

ただし、シーンは特別な位置に配置されるため、それでもあまり役に立ちません。つまり、遷移方向は次のシーンがある場所と一致する必要があります。

トップツーダウンまたはその逆はどうですか? 1次元しか扱えないようです。

彼らはすでにこの問題を修正しています。 デフォルトでは方向がrightToLeftであるため、必要なのはdirectionプロパティを提供することだけです。
import { I18nManager } from 'react-native'
let directionSide = I18nManager.isRTL ? 'leftToRight' : null
<Scene key='xXXXX' component={XXXXX} title='XXXXX' direction={directionSide}/>

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

basdvries picture basdvries  ·  3コメント

sarovin picture sarovin  ·  3コメント

willmcclellan picture willmcclellan  ·  3コメント

fgrs picture fgrs  ·  3コメント

GCour picture GCour  ·  3コメント