React Native、导航实验动画

Question

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

Answer 1

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

此时，react native 似乎只有 right-to-left 和 bottom-to-up 开箱即用的动画。您可以通过 NavigationCardStackStyleInterpolator 使用它们：forHorizontal 和 forVertical.

有关详细信息，请参阅：NavigationCardStackStyleInterpolator.js。

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

您可以像这样定义 style 属性或 NavigationCard：

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

这会将过渡从左到右更改为自下而上。

Answer 2

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

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

Answer 3

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

React Native、导航实验动画

React Native, NavigationExperimental Animations

navigation

react-native