关于React Native中两种StackNavigator导入方式的技术咨询

Hey there! Great question—this is a super common point of confusion for React Native beginners diving into navigation. Let’s break down the differences, which approach is better, and why:

Why the Two Different Import Styles? #

The split comes down to React Navigation version history:

• Older versions (v1 & v2): All navigation components (StackNavigator, TabNavigator, etc.) were bundled together in the main react-navigation package. That’s why you’d see imports like:

  import { StackNavigator, TabNavigator } from 'react-navigation';
  

• Versions v3+ (including current v6): The React Navigation team split the library into smaller, focused packages to reduce bundle size and improve maintainability. The core utilities live in react-navigation (or @react-navigation/native for v6), while specific navigators are in separate packages:
  • Stack navigation → react-navigation-stack (v3-v5) or @react-navigation/stack (v6)
  • Tab navigation → react-navigation-tabs (v3-v5) or @react-navigation/bottom-tabs (v6)
    This is why the modern import looks like:

  import { createStackNavigator } from 'react-navigation-stack';
  

Which Approach Is Better? #

For any new project, the split package approach is strongly preferred for these reasons:

• Smaller bundle size: You only install and import the navigators you actually use, instead of pulling in all navigation types even if you don’t need them.
• Better maintainability: Each navigator package is updated independently, so bug fixes or feature updates for stack navigation don’t require updating the entire library.
• Official support: This is the current recommended pattern from the React Navigation team, and it aligns with the latest version (v6) which uses an even more refined split structure.

If you’re working on an older project using v1/v2, you’ll have to stick with the original bundled imports—but for new code, go with the split packages.

Is react-navigation-stack Part of React Navigation? #

Absolutely! It’s an official, first-party package maintained by the same team behind React Navigation. It’s not a third-party plugin—it’s the dedicated stack navigation implementation for React Navigation v3 through v5 (v6 uses @react-navigation/stack instead, but it’s the same core idea).

Is This Just a Personal Preference? #

No, it’s not just preference. The split was a deliberate design choice by the React Navigation team to improve the library’s performance and scalability. The old bundled approach is legacy, tied to older versions of the library. While some developers might still use it for legacy projects, it’s not the recommended path for new work.

内容的提问来源于stack exchange，提问作者vkumar