React Native为何能正确定位待导入.js文件？新手运行困惑解析

1. React Native 为何能正确定位待导入的.js文件？ #

核心原因是Node.js 模块解析规则 + React Native 自身的包导出转发机制在协同工作：

• 当你写 import { Text, TextInput } from 'react-native' 时，Node.js 会优先去项目根目录的 node_modules 文件夹里查找名为 react-native 的包。
• 找到这个包后，它会读取包根目录下的 package.json 文件，通过里面的 main 字段（RN 也会识别专属的 react-native 字段）找到包的入口文件，一般是 index.js。
• 这个入口文件是关键！RN 团队已经在这里把所有常用组件做了统一的导出转发。你打开 node_modules/react-native/index.js 就能看到类似这样的代码：

  export { default as Text } from './Libraries/Text/Text';
  export { default as TextInput } from './Libraries/Components/TextInput/TextInput';
  

• 所以你从 react-native 导入组件时，本质是从这个入口文件拿到转发后的组件，完全不用自己去写冗长的子路径。

另外，RN 也支持开发者配置绝对路径或导入别名（比如用 babel-plugin-module-resolver），但官方组件的导入逻辑核心就是上面说的包入口转发。

2. 为什么 Text 和 TextInput 在不同路径却能统一导入？ #

这是 RN 团队对组件的分类组织策略导致的：

• Text 是最基础的文本渲染组件，被归类到 Libraries/Text 目录，这个目录专门管理和文本渲染相关的核心模块；
• TextInput 虽然和文本相关，但它属于交互类的输入组件，所以被放在 Libraries/Components/TextInput 这个通用组件分类目录下。

不管这些组件藏在哪个子目录，RN 都会在包的入口文件里把它们统一导出，这样开发者不用记住每个组件的具体位置，只需要从 react-native 包导入就行，极大简化了开发体验。

你可以自己去翻一下 node_modules/react-native/index.js 文件，里面几乎涵盖了所有常用 RN 组件的导出语句，它们都指向各自的实际文件路径，但咱们开发者完全不用关心这些细节～

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