React Native，NavigationExperimental动画 [英] React Native, NavigationExperimental Animations

问题描述

React Native Navigation实验支持从底部滑动，从左侧滑动，淡入淡出效果等吗?如果是的话，我们该怎么做.请帮忙.

Does React Native Navigation experimental support slide from bottom, slide from left, fade effects etc? If yes how do we do it. Please help.

推荐答案

使用NavigationTransitioner的renderScene渲染场景时，会得到props对象，其中包含layout，position，scene和progress.您可以将它们与自定义插值功能一起使用，以创建所需的任何动画.

When you render your scene using renderScene of NavigationTransitioner, you get props object that contains layout, position, scene and progress. You can use them with your custom interpolation function to create any animation you like.

这时，react native似乎只有现成的right-to-left和bottom-to-up动画.您可以通过NavigationCardStackStyleInterpolator:forHorizontal和forVertical使用它们.

At this time, react native seems to have only right-to-left and bottom-to-up animations out-of-the-box. You can use them via NavigationCardStackStyleInterpolator: forHorizontal and forVertical.

请参阅: NavigationCardStackStyleInterpolator.js 了解更多信息.

See: NavigationCardStackStyleInterpolator.js for more details.

如果您的代码如下: RN-NavigationExperimental-Redux-Example

您可以定义NavigationCard的style属性，例如:

You can define style property of NavigationCard like:

<NavigationCard
  {...props}
  style={NavigationCardStackStyleInterpolator.forVertical(props)}
  renderScene={this._renderScene}
  key={props.scene.navigationState.key}
/>

这将改变从左到右到从下到上的过渡.

This will change transition from left-to-right to bottom-to-up.

这篇关于React Native，NavigationExperimental动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！