React Native 路由器 Flux - 模拟 android 推送答案

【问题标题】：React native router flux - simulate android pushReact Native 路由器 Flux - 模拟 android 推送
【发布时间】：2017-03-13 13:31:48
【问题描述】：

在 react-native-router-flux 中，是否可以模拟标准的 Android 转换，当通过类型 PUSH 将新屏幕添加到导航器堆栈时，导航栏不会从右到左动画？我不是在谈论使用REPLACE 或RESET 的类型，因为它们不允许您返回原始场景。我想要的行为是新视图淡入（我可以通过设置 animation 道具来做到这一点），并且导航栏被简单地替换为没有任何动画的新视图 - 就像 REPLACE 和 @ 987654326@。但是，我无法弄清楚如何防止在 PUSH 转换时出现从右到左的动画。

这是我的代码：

<Scene
    key="gray"
    component={GrayScreen}
    title="Gray"
    animation={(Platform.OS === 'ios') ? '' : 'fade'}
    hideBackImage={!(Platform.OS === 'ios')}
 />

【问题讨论】：

您可以尝试覆盖animationStyle 函数。 animation 不能设置为 ''，因为 fade 是唯一可用的选项
@TobiasLins 我尝试覆盖 animationStyle 但它没有用 - 我想是因为我没有经验。我希望该库将包含一种简单的方法来做到这一点，因为这就是每个商业 android 应用程序的功能（即导航栏上没有水平动画）。对于 iOS 案例，我将 animation 设置为 '' 并忽略它，这就是我想要的

标签： android react-native react-native-router-flux

【解决方案1】：

你必须在屏幕上使用transitionConfig

导入 StackViewStyleInterpolator 并使用它来改变水平的屏幕样式，对于垂直，对于FadeFromBottomAndroid，淡入淡出

import StackViewStyleInterpolator from 'react-navigation-stack/dist/views/StackView/StackViewStyleInterpolator';

<Scene 
   key="root"
   transitionConfig={() => ({ screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid })}>

【讨论】：