React Native脚手架文件解析、精简构建及运行原理咨询

Hey there! Since you're already up and running with React Native CLI and come from a React.js web background, let's break down your questions step by step.

一、脚手架文件解析 & 可安全删除的文件（最小化构建） #

First, let's recap the default structure from React Native CLI's scaffold—this will help you spot what's essential vs. disposable:

├── android/          # Android原生工程文件（构建Android应用的核心）
├── ios/              # iOS原生工程文件（构建iOS应用的核心）
├── node_modules/     # 依赖包（自动生成，不要手动删除）
├── App.js            # 默认根组件
├── App.test.js       # 默认测试文件
├── index.js          # RN应用入口（核心文件！）
├── package.json      # 依赖与脚本配置（核心文件！）
├── babel.config.js   # Babel转译配置（核心文件！）
├── metro.config.js   # Metro打包工具配置（核心文件！）
├── .gitignore        # Git忽略规则
├── README.md         # 默认项目文档

以下是你可以安全删除、实现最小化构建的内容：

• App.test.js：如果暂时不需要写测试，直接删掉就行，后续需要时再新建即可。
• README.md：默认文档很通用，你可以换成自己的项目说明，或者直接删除。
• .gitignore：只有当你完全不用Git管理项目时才删，更推荐保留并根据需求调整规则。
• 默认图标资源：android/app/src/main/res/mipmap-*和ios/[你的项目名]/Images.xcassets/AppIcon.appiconset里的RN默认图标，如果你要替换成自己的图标，可以删掉这些默认文件，但要保留目录结构，避免原生构建报错。
• 根目录App.js：如果把根组件移到src/目录（常见的代码组织方式），可以删除根目录的App.js，记得把index.js里的导入路径改成src/App.js。

⚠️ 绝对不能删除的文件：index.js、babel.config.js、metro.config.js、package.json，以及整个android/和ios/目录——这些是RN应用的核心骨架。

二、React Native 生态系统快速梳理 #

从Web React转过来，你会发现一些熟悉的工具，也会遇到RN专属的核心模块：

• 核心框架层：提供原生驱动的基础组件（如View、Text、Image）和系统API（网络请求、本地存储、设备权限等），最关键的是JS-原生桥接机制，让JS代码能和Android/iOS原生代码通信。
• 构建工具链：
  • Metro：RN专属的打包工具（替代Webpack），负责把你的JS/JSX代码打包成原生应用能加载的bundle文件。
  • Babel：转译JSX、ES6+语法以及RN专属代码，@babel/preset-react-native预设会处理所有RN相关的语法适配。
• 第三方库生态：
  • UI组件库（NativeBase、React Native Elements）：帮你快速搭建基础UI，不用从零开始写原生样式。
  • 原生功能封装库（react-native-camera、react-native-reanimated）：结合JS代码和自定义原生模块，实现RN核心API覆盖不到的功能。
  • 状态管理：和Web React完全兼容，Redux、MobX、Zustand都能用；本地存储可以用AsyncStorage，或者性能更好的react-native-mmkv。
• 原生开发层：当RN的内置API满足不了需求时，你可以编写自定义的Android（Java/Kotlin）或iOS（Swift/OC）原生模块，再通过桥接暴露给JS调用。

三、Babel编译JSX 与 React Native 运行原理 #

咱们把Babel转译、JSX和RN的渲染流程串起来看：

1. Babel转译JSX：
   Web React里Babel会把JSX转成React.createElement()调用，RN也是一样，但这里的React是RN核心库，它会把JSX元素映射到对应的原生视图。
   举个例子：
   你写的JSX代码：

   <View style={{ padding: 16 }}>
     <Text>Hello React Native!</Text>
   </View>
   

   会被Babel转译成：

   React.createElement(
     View,
     { style: { padding: 16 } },
     React.createElement(Text, null, "Hello React Native!")
   );
   

2. RN运行时流程：

   • Metro把转译后的JS代码和依赖打包成一个JS bundle文件。
   • 应用启动时，JS引擎（现在推荐用Hermes，替代旧的JSC/V8）加载这个bundle文件。
   • JS引擎执行代码，生成Shadow Tree（RN版的虚拟DOM）。
   • 桥接机制把Shadow Tree的结构和属性传递给原生端。
   • 原生端根据Shadow Tree创建真实的原生视图（比如Android的TextView、iOS的UILabel），并渲染到屏幕上。
   • 当组件状态变化时，JS端更新Shadow Tree，桥接机制把差异发送给原生端，高效更新视图。

Hermes引擎是RN现在的重点优化方向，它会提前把JS代码编译成字节码，大幅提升应用启动速度和内存使用效率，这也是RN和Web React运行时的核心区别之一。

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