React Native 代码库概览

本文没有干货，只是对 React Native 代码库目录结构的解释说明，基于 https://github.com/facebook/react-native/tree/eacc94005b1b1d33d47b3bea88a6fd242560dafb 版本。

React Native 目录结构

根目录

$ tree -L 1 -a --dirsfirst -I node_modules
.
├── .circleci
├── .git
├── .github
├── IntegrationTests
├── Libraries
├── React
├── ReactAndroid
├── ReactCommon
├── bots
├── docs
├── flow
├── flow-typed
├── gradle
├── jest
├── keystores
├── local-cli
├── packages
├── repo-config
├── scripts
├── template
├── third-party-podspecs
├── tools
├── .buckconfig
├── .buckjavaargs
├── .clang-format
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .flowconfig
├── .flowconfig.android
├── .gitignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── ECOSYSTEM.md
├── LICENSE
├── LICENSE-docs
├── README.md
├── React-Core.podspec
├── React.podspec
├── Releases.md
├── build.gradle.kts
├── cli.js
├── gradle.properties
├── gradlew
├── gradlew.bat
├── index.js
├── interface.js
├── jest-preset.js
├── jest.config.js
├── metro.config.js
├── package.json
├── react-native.config.js
├── react.gradle
├── rn-get-polyfills.js
├── runXcodeTests.sh
├── settings.gradle.kts
├── template.config.js
└── yarn.lock

不同技术的代码、配置文件混在一起，下面对这些目录、文件做个简单介绍：

.circleci: CircleCI 配置
.git: Git 配置
.github: GitHub 配置
IntegrationTests: JS，集成测试相关
Libraries: JS 和 Objective-C，原生模块
React: Objective-C，React Native iOS 实现
ReactAndroid: Java，React Native Android 实现
ReactCommon: C++，React Native iOS/Android 公用代码
bots: GitHub Bot
docs: 包含生成组件 API 文档的脚本
flow: Flow 类型定义
flow-typed: 来自 flow-typed 的 Flow 类型定义
gradle: Gradle Wrapper
jest: Jest 相关测试脚本
keystores: Java Keystore 配置
local-cli: React Native CLI 入口，实际指向 @react-native-community/cli
packages: 一些 npm 和 Gradle 包，见下文介绍
repo-config: 项目配置 npm 包，即 @react-native/repo-config
scripts: 一些 JS 和 Shell 脚本
template: 用于创建新 React Native 项目的模板
third-party-podspecs: 第三方 PodSpec 文件
tools: Bazel 构建配置 https://bazel.build/
.buckconfig: Buck 配置 https://buck.build/files-and-dirs/buckconfig.html
.buckjavaargs: Buck 配置 https://buck.build/files-and-dirs/buckjavaargs.html
.clang-format: C/C++/Objective-C 代码格式化配置
.editorconfig: 编辑器代码风格配置 https://editorconfig.org/
.eslintignore: ESLint 配置
.eslintrc: ESLint 配置
.flowconfig: Flow 配置 https://flow.org/en/docs/config/
.flowconfig.android: Flow 配置
.gitignore: Git 配置
.prettierrc: Prettier 配置，前端代码格式化
CODE_OF_CONDUCT.md: 行为准则
CONTRIBUTING.md: 贡献指南
ECOSYSTEM.md: 生态系统
LICENSE: 代码的许可证
LICENSE-docs: 文档的许可证
README.md
React-Core.podspec: CocoaPods 配置文件
React.podspec: CocoaPods 配置文件
Releases.md: 发布指南
build.gradle.kts: Kotlinscript 格式的 Gradle 构建脚本
cli.js: React Native CLI 入口，指向 @react-native-community/cli
gradle.properties: Gradle 配置
gradlew: Gradle Wrapper
gradlew.bat: Gradle Wrapper
index.js: 项目入口
interface.js: 类型定义
jest-preset.js: Jest 配置
jest.config.js: Jest 配置
metro.config.js: Metro 打包器配置
package.json
react-native.config.js: React Native CLI 配置
react.gradle: Gradle 配置
rn-get-polyfills.js: E2E 测试使用到的 polyfill 文件，指向 @react-native/polyfills
runXcodeTests.sh: 运行 Xcode 测试的脚本
settings.gradle.kts: Kotlinscript 格式的 Gradle 设置脚本
template.config.js: 模块配置文件，对应 template 文件夹
yarn.lock: Yarn lock 文件

`packages` 目录

$ tree -L 1
.
├── assets
├── babel-plugin-codegen
├── eslint-config-react-native-community
├── eslint-plugin-codegen
├── eslint-plugin-react-native-community
├── normalize-color
├── polyfills
├── react-native-codegen
├── react-native-gradle-plugin
└── rn-tester

packages 下每个文件夹都对应一个 @react-native/* npm 包，直接搬运官方介绍：

assets: Asset support code for React Native
babel-plugin-codegen: Babel plugin to generate native module and view manager code for React Native
eslint-config-react-native-community: ESLint config for React Native
eslint-plugin-codegen: ESLint rules to validate NativeModule and Component Specs
eslint-plugin-react-native-community: ESLint rules for @react-native-community/eslint-config
normalize-color: Color normalization code for React Native
polyfills: Polyfills for React Native
react-native-codegen: Code generation tools for React Native
react-native-gradle-plugin: Gradle plugin for React Native
rn-tester: React Native tester app

其他文件说明

*.gradle: Groovy 格式 Gradle 脚本
*.gradle.kts: Kotlinscript 格式 Gradle 脚本
*.bzl: Bazel 配置文件
*.pro: ProGuard 配置文件 http://developer.android.com/guide/developing/tools/proguard.html
*.podspec: Ruby 格式，CocoaPods 配置文件
Gemfile: Ruby 配置文件
Podfile: CocoaPods 配置文件
Podfile.lock: CocoaPods lock 文件
BUCK: Buck 构建配置 https://buck.build/concept/build_file.html

React Native App 目录结构

首先初始化一个 TypeScript 的 React Native 项目：

npx react-native@0.63.4 init AwesomeTSProject --template react-native-template-typescript

AwesomeTSProject 根目录

$ tree -L 1 -a --dirsfirst -I node_modules
.
├── .git
├── __tests__
├── android
├── ios
├── .buckconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── app.json
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
├── tsconfig.json
└── yarn.lock

一个很简单的前端项目目录结构，所以这里只对其中的部分目录、文件加以说明：

__tests__: 单元测试
android: Android 代码
ios: iOS 代码
.gitattributes: Git 配置 https://www.git-scm.com/docs/gitattributes
.watchmanconfig: Watchman 配置 https://facebook.github.io/watchman/docs/config.html
app.json: App 配置，可以不需要该文件 https://github.com/react-native-community/cli/issues/1113

android 目录（`AwesomeTSProject/android`）

$ tree -L 3 -a --dirsfirst -I .gradle
.
├── app
│   ├── build
│   │   ├── generated
│   │   ├── intermediates
│   │   ├── outputs
│   │   └── tmp
│   ├── src
│   │   ├── debug
│   │   └── main
│   ├── _BUCK
│   ├── build.gradle
│   ├── build_defs.bzl
│   ├── debug.keystore
│   └── proguard-rules.pro
├── gradle
│   └── wrapper
│       ├── gradle-wrapper.jar
│       └── gradle-wrapper.properties
├── build.gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
└── settings.gradle

一个普通的 Android 项目目录结构。

再看下其中的 src 目录（AwesomeTSProject/android/app/src）：

$ tree -a --dirsfirst
.
├── debug
│   ├── java
│   │   └── com
│   │       └── awesometsproject
│   │           └── ReactNativeFlipper.java
│   └── AndroidManifest.xml
└── main
    ├── java
    │   └── com
    │       └── awesometsproject
    │           ├── MainActivity.java
    │           └── MainApplication.java
    ├── res
    │   ├── mipmap-hdpi
    │   │   ├── ic_launcher.png
    │   │   └── ic_launcher_round.png
    │   ├── mipmap-mdpi
    │   │   ├── ic_launcher.png
    │   │   └── ic_launcher_round.png
    │   ├── mipmap-xhdpi
    │   │   ├── ic_launcher.png
    │   │   └── ic_launcher_round.png
    │   ├── mipmap-xxhdpi
    │   │   ├── ic_launcher.png
    │   │   └── ic_launcher_round.png
    │   ├── mipmap-xxxhdpi
    │   │   ├── ic_launcher.png
    │   │   └── ic_launcher_round.png
    │   └── values
    │       ├── strings.xml
    │       └── styles.xml
    └── AndroidManifest.xml

代码只包含 MainApplication.java 和 MainActivity.java。

ios 目录（`AwesomeTSProject/ios`）

$ tree -a --dirsfirst
.
├── AwesomeTSProject
│   ├── Images.xcassets
│   │   ├── AppIcon.appiconset
│   │   │   └── Contents.json
│   │   └── Contents.json
│   ├── AppDelegate.h
│   ├── AppDelegate.m
│   ├── Info.plist
│   ├── LaunchScreen.storyboard
│   └── main.m
├── AwesomeTSProject-tvOS
│   └── Info.plist
├── AwesomeTSProject-tvOSTests
│   └── Info.plist
├── AwesomeTSProject.xcodeproj
│   ├── xcshareddata
│   │   └── xcschemes
│   │       ├── AwesomeTSProject-tvOS.xcscheme
│   │       └── AwesomeTSProject.xcscheme
│   └── project.pbxproj
├── AwesomeTSProjectTests
│   ├── AwesomeTSProjectTests.m
│   └── Info.plist
└── Podfile

iOS 部分一样很精简，只有 main.m、AppDelegate.m 和对应的头文件 AppDelegate.h。