react-navigation 路由跳转push和replace

最新推荐文章于 2025-07-01 17:08:40 发布

鹿的迷雾林

最新推荐文章于 2025-07-01 17:08:40 发布

阅读量6.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react-navigation

本文链接：https://blog.youkuaiyun.com/m0_37604745/article/details/89395358

react-native 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了在React-Native开发中如何使用react-navigation实现路由跳转，包括创建路由栈、push和replace路由的具体操作，为开发者提供了实用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react-native开发中，我们往往需要用到路由跳转。
使用react-navigation实现功能。
文档在此。

0. 创建路由栈

import {createStackNavigator, createAppContainer} from "react-navigation";

/** 引入路由页面 */
import ChooseSystem from "./pages/account/chooseSystem";
import TabPage from './pages/tabPage/mainTab';

const navigator = createStackNavigator(
    {
        Welcome: {
            screen: Welcome,
            navigationOptions: ({navigation}) => ({
                header: null,  //隐藏顶部导航栏
            })
        },
        ChooseSystem: {
            screen: ChooseSystem,
            navigationOptions: ({navigation}) => ({
                title: `选择体系`,
            })
        }
    },
     {
        initialRouteName: "Welcome",
        headerMode: 'screen',
        mode: 'modal',// 定义了渲染和过渡的风格:
        defaultNavigationOptions: {
            gesturesEnabled: true,
            headerBackImage:
                <Image
                    source={require('./images/common/icon_basis_arrow_left.png')}
                    style={{width: 15, height: 15}}
                />,
            headerStyle: {            //标题栏样式
                backgroundColor: '#fff',
            },
            headerTintColor: '#595867',  //标题文字和按钮颜色
            headerTitleStyle: {       //标题文字样式
                fontWeight: 'bold',
            },
        },
        transitionConfig: () => ({
            transitionSpec: {
                duration: 300,
            },
            screenInterpolator: sceneProps => {
                const {layout, position, scene} = sceneProps;
                const {index} = scene;

                const height = layout.initHeight;
                const translateY = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [height, 0, 0],
                });
                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                });
                return {opacity, transform: [{translateY}]};
            },
        }),
    }
 )
export default createAppContainer(navigator);

1. push路由

这种方式的路由，可以用返回键返回。

const {navigate} = this.props.navigation;
 navigate("WalletList");

2. replace路由

这种方式的路由，相当于将路由栈内部的清空，再将目标路由push进栈。

import {NavigationActions, StackActions} from "react-navigation";

const resetAction = StackActions.reset({
        index: 0,
         actions: [
             NavigationActions.navigate({routeName})
         ]
     });
this.props.navigation.dispatch(resetAction);