React Native、Navigation 实验动画

Posted 2023-04-13

【中文标题】React Native、Navigation 实验动画

【英文标题】：React Native, NavigationExperimental Animations

【发布时间】：2016-09-17 22:07:46

【问题描述】：

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

【参考方案1】：

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

此时，React Native 似乎只有 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
/>

这会将转换从从左到右更改为从下到上。

【参考方案2】：

只想注意cardStyleInterpolator 属性was added 到NavigationCardStack。很快（使用 RN 0.41 及更高版本）将可以使用自定义动画而无需重写卡片堆栈。

【参考方案3】：

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

React Navtive NavigationCardStackStyleInterpolator.forVertical() - How can I change the direction?