React Navigation：Android的StackNavigator转换

Question

我正在使用这个库https://reactnavigation.org/docs/intro/通过react-native构建android。我可以在Android设备上进行导航，但是如何让屏幕从右侧滑入并从左侧淡入。似乎这种行为发生在iOS设备上，而不是在Android中。 Android应用程序有任何动画配置吗？

请看下面的动画。这是在iOS中记录的。

Answer 1

您应该使用transitionConfig覆盖默认的屏幕转换，如on this page所示。

遗憾的是，没有提供该函数如何工作的示例，但您可以在此文件中找到一些示例：\react-navigation\lib\views\CardStackStyleInterpolator.js

所以你的代码应该是这样的：

 const navigator = StackNavigator(scenes, {
transitionConfig: () => ({
    screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [layout.initWidth, 0, 0]
        });

        const opacity = position.interpolate({
            inputRange: [
                index - 1,
                index - 0.99,
                index,
                index + 0.99,
                index + 1
            ],
            outputRange: [0, 1, 1, 0.3, 0]
        });

        return { opacity, transform: [{ translateX }] };
    }
})
});

Answer 2

更好的是你可以使用本地navigation反应。您可以使用configureScene方法配置屏幕。在该方法内部使用Navigator.SceneConfigs来设置动画屏幕。它适用于Android和iOS。

Answer 3

您可以从index.d.ts文件中获取有用的信息，找到export interface TransitionConfig，然后在NavigationTransitionSpec和NavigationSceneRendererProps上按“Ctrl”和left_click，然后您就可以获得所需的一切。