20

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

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

在此处输入图像描述

4

7 回答 7

26

从：“@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

于 2020-10-18T21:56:39.597 回答
22

您应该使用覆盖此页面上transitionConfig所写的默认屏幕转换。

不幸的是，没有提供该函数如何工作的示例，但您可以在此文件中找到一些示例：\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 }] };
    }
})
});
于 2017-05-16T12:14:08.680 回答
3

您需要从“react-navigation-stack”导入 StackViewTransitionConfigs，然后覆盖 transitionConfing 函数。

const myStack = createStackNavigator({
    Screen1,
    Screen2,
    Screen3
},{
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS
}
于 2020-02-18T09:56:45.767 回答
2

对于 StackNavigatoin 6.xx

只需导入

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

然后创建一个配置：

const screenOptionStyle = {
  // headerShown: false,  
  ...TransitionPresets.SlideFromRightIOS,
};

最后将它们分配给 Stack Navigator 屏幕选项：

<Stack.Navigator 
     screenOptions={screenOptionStyle}
    > 

      <Stack.Screen 
      ...
      ...
于 2021-09-20T10:42:54.673 回答
1

在@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>
于 2021-04-19T18:10:10.300 回答
0

您可以从文件中获取有用的信息index.d.ts，找到export interface TransitionConfig，然后按 'Ctrl' & left_clickNavigationTransitionSpec和NavigationSceneRendererProps，然后您可以获得所需的一切。

于 2017-09-25T02:02:59.747 回答
0

更好的是，您可以为此使用 react 本机导航。您可以使用configureScene方法配置屏幕。在该方法中，使用Navigator.SceneConfigs为屏幕设置动画。它适用于 android 和 iOS。

于 2017-03-17T10:44:34.180 回答