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

从：“ @ react-navigation / native”开始：“ ^ 5.5.1”，

import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';


const TransitionScreenOptions = {
  ...TransitionPresets.SlideFromRightIOS, // This is where the transition happens
};

const CreditStack = createStackNavigator();

function CreditStackScreen() {
  return (
    <CreditStack.Navigator screenOptions={TransitionScreenOptions}> // Don't forget the screen options
      <CreditStack.Screen
        name="Credit"
        component={HomeScreen}
        options={headerWithLogo}
      />
      <HomeStack.Screen
        name="WorkerDetails"
        component={WorkerDetails}
        options={headerWithLogoAndBackBtn}
      />
    </CreditStack.Navigator>
  );
}

您可以观看此视频以了解更多信息： https://www.youtube.com/watch?v=PvjV96CNPqM&ab_channel=UnsureProgrammer

Answer 3

您需要从“反应导航堆栈”导入StackViewTransitionConfigs 然后，覆盖transitionConfing函数。

const myStack = createStackNavigator({
    Screen1,
    Screen2,
    Screen3
},{
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS
}

Answer 4

最好你可以使用react native navigation来做到这一点。您可以使用 configureScene 方法配置屏幕。在该方法中使用 Navigator.SceneConfigs 来设置动画屏幕。它适用于Android和iOS。

Answer 5

您可以从index.d.ts文件中获取有用的信息，找到export interface TransitionConfig，然后按“Ctrl＆＃39; ＆安培; left_click NavigationTransitionSpec和NavigationSceneRendererProps，然后你可以得到你想要的一切。

Answer 6

在@react-navigation/stack 组件版本上，从右侧动画做幻灯片的方法是：

<Stack.Navigator
    screenOptions={{
        cardStyleInterpolator: ({index, current, next, layouts: {screen}}) => {
            const translateX = current.progress.interpolate({
                inputRange: [index - 1, index, index + 1],
                outputRange: [screen.width, 0, 0],
            });

            const opacity = next?.progress.interpolate({
                inputRange: [0, 1, 2],
                outputRange: [1, 0, 0],
            });

            return {cardStyle: {opacity, transform: [{translateX}]}};
        },
    }}>
    <Stack.Screen name="MainScreen" component={MainScreen} />
    ...
</Stack.Navigator>