React Native、Navigation 实验动画答案

【问题标题】：React Native, NavigationExperimental AnimationsReact Native、Navigation 实验动画
【发布时间】：2016-09-17 22:07:46
【问题描述】：

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

【问题讨论】：

标签： navigation react-native

【解决方案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?

【讨论】：