SuperAPI AI 工具集

react-native-navigation

前端与建站

查看项目

更新于 10-16 05:52

技能介绍

用途:在 React Native 应用中用 React Navigation(事实标准导航库)实现导航。安装:npm install @react-navigation/native;npm install react-native-screens react-native-safe-area-context;堆栈导航安装 @react-navigation/native-stack;底部标签安装 @react-navigation/bottom-tabs;抽屉导航需 @react-navigation/drawer、react-native-gesture-handler、react-native-reanimated。

主要能力:以 NavigationContainer 包裹导航器,用 createNativeStackNavigator、createBottomTabNavigator 等创建堆栈、底部标签与抽屉导航;通过 navigate 传参并用 route.params 读取;支持导航头部自定义、从屏幕内用 navigation.setOptions 动态设置标题与 headerRight、嵌套导航器组合标签与堆栈、模态呈现、深链接配置(prefixes 与 screens 路径映射)、鉴权流程按登录状态切换屏幕、导航守卫在未认证时 replace 到登录页、自定义底部标签栏。

最佳实践:定义 ParamList 类型与全局 RootParamList,使用 NativeStackScreenProps 实现类型安全导航;替换屏幕用 replace,避免在无依赖数组的 useEffect 中导航导致死循环;Android 需用 BackHandler 处理硬件返回键。

适用场景:需要多页面跳转、底部标签、抽屉菜单、深链接或登录态控制的 React Native 应用。限制:资料仅以 React Navigation 为例,未提供 Expo Router 等其他方案;收费、价格与平台支持情况暂未提供。