React-native-router-flux: 场景转换的自定义动画

创建于 2016-07-09  ·  3评论  ·  资料来源: aksonov/react-native-router-flux

版本

  • react-native-router-flux v3.26.13
  • 反应原生 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>
    );

但是,它仍然不是很有用,因为场景被放置在特殊位置,这意味着过渡方向必须与下一个场景所在的位置相匹配

从上到下或反之亦然? 它似乎只处理一维。

他们已经解决了这个问题。 您需要做的就是提供direction属性,因为默认情况下方向是 rightToLeft。
import { I18nManager } from 'react-native'
let directionSide = I18nManager.isRTL ? 'leftToRight' : null
<Scene key='xXXXX' component={XXXXX} title='XXXXX' direction={directionSide}/>

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

moaxaca picture moaxaca  ·  3评论

basdvries picture basdvries  ·  3评论

booboothefool picture booboothefool  ·  3评论

YouYII picture YouYII  ·  3评论

wootwoot1234 picture wootwoot1234  ·  3评论