react navite 页面跳转、传参、路由监听、导航栏自定义

如果你说的是 React Native + React Navigation（v6/v7） ，那么页面跳转、传参、路由监听、导航栏自定义是最核心的部分。

---

1. 安装 React Navigation

npm install @react-navigation/native

npm install react-native-screens
npm install react-native-safe-area-context

npm install @react-navigation/native-stack

根组件：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomePage}
        />
        <Stack.Screen
          name="Detail"
          component={DetailPage}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

2. 页面跳转

普通跳转

navigation.navigate('Detail');

---

替换当前页面

类似 Vue Router replace

navigation.replace('Detail');

---

返回上一页

navigation.goBack();

---

返回首页

navigation.popToTop();

---

3. 页面传参

发送参数

navigation.navigate('Detail', {
  id: 1001,
  title: 'React Native'
});

---

接收参数

function DetailPage({ route }) {

  const { id, title } = route.params;

  return (
    <Text>
      {id} - {title}
    </Text>
  );
}

---

TS类型定义

type RootStackParamList = {
  Home: undefined;
  Detail: {
    id: number;
    title: string;
  };
};

---

4. 返回时传参

详情页：

navigation.navigate({
  name: 'Home',
  params: {
    refresh: true
  },
  merge: true,
});

首页：

useEffect(() => {
  if(route.params?.refresh){
    loadData();
  }
}, [route.params]);

---

5. 路由监听

页面获得焦点

最常用

import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
  React.useCallback(() => {
    console.log('页面显示');

    return () => {
      console.log('页面隐藏');
    };
  }, [])
);

类似：

onShow
onHide

---

focus监听

useEffect(() => {

  const unsubscribe =
    navigation.addListener('focus', () => {

      console.log('进入页面');

    });

  return unsubscribe;

}, [navigation]);

---

blur监听

useEffect(() => {

  const unsubscribe =
    navigation.addListener('blur', () => {

      console.log('离开页面');

    });

  return unsubscribe;

}, [navigation]);

---

6. 页面离开拦截

例如：

用户修改表单后未保存

useEffect(() => {

  const unsubscribe =
    navigation.addListener(
      'beforeRemove',
      (e) => {

        e.preventDefault();

        Alert.alert(
          '提示',
          '确定离开页面吗？'
        );
      }
    );

  return unsubscribe;

}, [navigation]);

---

7. 获取当前路由

import { useRoute } from '@react-navigation/native';

const route = useRoute();

console.log(route.name);

---

8. 自定义导航栏标题

静态方式

<Stack.Screen
  name="Detail"
  component={DetailPage}
  options={{
    title: '详情页'
  }}
/>

---

动态方式

useLayoutEffect(() => {

  navigation.setOptions({
    title: '用户详情'
  });

}, []);

---

9. 自定义返回按钮

navigation.setOptions({

  headerLeft: () => (
    <Button
      title="返回"
      onPress={() => navigation.goBack()}
    />
  )

});

---

10. 自定义右侧按钮

navigation.setOptions({

  headerRight: () => (

    <Button
      title="保存"
      onPress={saveData}
    />

  )

});

效果：

← 返回      用户详情      保存

---

11. 完全自定义 Header

<Stack.Screen
  name="Detail"
  component={DetailPage}
  options={{
    header: () => (
      <CustomHeader />
    )
  }}
/>

---

12. Bottom Tab 导航

import {
  createBottomTabNavigator
} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

<Tab.Navigator>

  <Tab.Screen
    name="Home"
    component={HomePage}
  />

  <Tab.Screen
    name="Mine"
    component={MinePage}
  />

</Tab.Navigator>

---

13. Tab 图标

<Tab.Screen
  name="Home"
  component={HomePage}
  options={{
    tabBarIcon: ({color,size}) => (
      <Icon
        name="home"
        color={color}
        size={size}
      />
    )
  }}
/>

---

14. Drawer 侧边栏

import {
 createDrawerNavigator
} from '@react-navigation/drawer';

const Drawer =
 createDrawerNavigator();

<Drawer.Navigator>
  <Drawer.Screen
    name="Home"
    component={HomePage}
  />
</Drawer.Navigator>

---

15. 企业项目常用导航结构

NavigationContainer
│
├── AuthStack
│   ├── Login
│   └── Register
│
└── MainTab
    │
    ├── HomeStack
    │   ├── Home
    │   └── Detail
    │
    ├── MessageStack
    │
    └── MineStack

这种 Tab + Stack 嵌套 是 React Native 商业项目最常见的导航架构。

如果你正在准备 React Native 面试或项目开发，建议重点掌握：

• Stack / Tab / Drawer 嵌套
• TypeScript 路由类型约束
• Deep Link（深链接）
• 页面生命周期（focus、blur）
• 状态管理（Redux Toolkit、Zustand）与导航联动
• React Navigation 性能优化（懒加载、屏幕缓存）

这些基本覆盖了 90% 以上 React Native 实际项目场景。