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

其他文件说明

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

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

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.javaMainActivity.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.mAppDelegate.m 和对应的头文件 AppDelegate.h