React Native,NavigationExperimental动画

时间:2016-05-20 15:04:06

标签: navigation react-native

React Native Navigation实验支持从底部滑动,从左侧滑动,淡化效果等吗?如果是,我们该怎么做。请帮忙。

3 个答案:

答案 0 :(得分:3)

当您使用renderScene NavigationTransitioner渲染场景时,您获得的props对象包含layoutpositionscene和{ {1}}。您可以将它们与自定义插值功能一起使用,以创建您喜欢的任何动画。

此时,本机反应似乎只有progressright-to-left动画开箱即用。您可以通过bottom-to-upNavigationCardStackStyleInterpolatorforHorizontal使用它们。

有关详细信息,请参阅:NavigationCardStackStyleInterpolator.js

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

您可以定义forVertical的{​​{1}}属性,如:

style

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

答案 1 :(得分:3)

只想注意cardStyleInterpolator属性was addedNavigationCardStack。很快(使用RN 0.41及以上版本)可以使用自定义动画而无需重写卡片堆栈。

答案 2 :(得分:0)

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

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