navigation - React Native, NavigationExperimental Animations

Question

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

Answer 1

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

这时候react native好像只有right-to-left和 bottom-to-up动画开箱即用。您可以通过 NavigationCardStackStyleInterpolator 使用它们:forHorizontal和 forVertical .

见:NavigationCardStackStyleInterpolator.js更多细节。

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

您可以定义 style NavigationCard 的属性(property)喜欢:

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

这将改变从左到右到自下而上的过渡。