react-native 安卓模式下使用左右滑动跳转页面

最新推荐文章于 2025-10-18 05:33:56 发布

原创最新推荐文章于 2025-10-18 05:33:56 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

react-native 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在React Navigation中实现页面的水平切换动画，通过配置StackNavigator实现安卓平台上的左右滑动切换效果。文章详细展示了使用createStackNavigator创建堆栈导航器，并设置defaultNavigationOptions和transitionConfig参数来启用手势返回及定制转场动画。

使用react-navigation时，安卓下使用左右跳转的方式跳转页面

import { createStackNavigator, StackViewStyleInterpolator } from 'react-navigation-stack';
import HomeTabBar from '../pages/home';
import DetailPage from '../component/home/detail';

const stackConfig = {
    defaultNavigationOptions: {
        gesturesEnabled: true,  //启用安卓的手势返回
    },
    transitionConfig: () => ({
        screenInterpolator: StackViewStyleInterpolator.forHorizontal, // 设置转场动画
    }),
};

export const HomeStack = createStackNavigator({
    Home: {
        screen: HomeTabBar
    },
    HomeDetail: {
        screen: DetailPage
    }
}, stackConfig);

其中StackViewStyleInterpolator的取值

/**
* 1、从右向左：forHorizontal
* 2、从下向上：forVertical
* 3、安卓那种的从下向上：forFadeFromBottomAndroid
* 4、无动画：forInitial
*/