反应原生，导航实验动画

Question

React 原生导航实验是否支持从底部滑动、从左侧滑动、淡入淡出效果等？如果是，我们该怎么做。请帮忙。

Answer 1

当你使用NavigationTransitioner renderScene渲染场景时，你会得到props包含layout、position、scene和progress的对象。您可以将它们与自定义插值函数一起使用，以创建您喜欢的任何动画。

目前，反应原生似乎只有开箱即用的right-to-left和bottom-to-up动画。您可以通过NavigationCardStackStyleInterpolator：forHorizontal和forVertical使用它们。

请参阅：NavigationCardStackStyleInterpolator.js了解更多详情。

如果您的代码如下所示：RN-NavigationExperimental-Redux-Example

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

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

这将更改从左到右到下到上的过渡。

Answer 2

只是想注意cardStyleInterpolator属性已添加到NavigationCardStack。很快（RN 0.41 及更高版本）就可以使用自定义动画而无需重写卡组。

Answer 3

如果您需要从

左到右到上到下的动画，您可以编写自己的自定义插值器。您可以使用 NavigationCardStackStyleInterpolator 组件作为模板并进行所需的更改。例如，请参阅以下链接以实现从上到对接的动画：

React Navtive NavigationCardStackStyleInterpolator.forVertical（） - 如何改变方向？