React Native使用@react-navigation/native配置页面路由

最新推荐文章于 2025-06-10 12:01:49 发布

爬行者小小

最新推荐文章于 2025-06-10 12:01:49 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： react.js react native javascript

本文链接：https://blog.csdn.net/jinkngmanka/article/details/128579923

今天看到了探花交友的验证码输入完成后，需要根据是否是新用户，跳转不同的页面，但是，可以明显感觉到现有的路由配置不适合页面比较多的场景，扩展性并不好，每次都需要写到nav.js文件中，如果页面特别多的话，这个文件会特别大，多人合作的话，冲突也会比较多。

参考Rn使用@react-navigation/native配置页面路由以及导航栏_51CTO博客_react native导航栏对现有的路由进行改造。

一、新建路由项目结构

index.js存放我们的全部页面，StackNavigator.js存放我们目前的堆栈页面，TabNavigator.js存放我们的底部tab栏，这里我们没用到，暂时放这里。

二、代码改造

1、index.js存放我们的全部页面

import Login from '../pages/account/login';
import Demo from '../pages/Demo/Demo';

const router = [
  //   {
  //     name: 'Index', //跳转路径
  //     title: '明知山', //头部展示标题
  //     component: require('./TabNavigator').default,
  //   },
  //下面只需要配置非tabbar页面路径
  {
    name: 'Demo',
    title: 'Demo',
    component: Demo,
  },
  {
    name: 'Login',
    title: '登录',
    component: Login,
  },
];
export default router;

2、stackNavigator使用@react-navigation/native-stack配置路由

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
import router from './index';
import {isShowDemo} from '../constant/Limits';

const Stack = createNativeStackNavigator();

const StackNavigator = () => {
  //从子导航器获取路由名称
  const getChildTitle = route => {
    const routeNam