React Native学习系列:
React Native学习笔记一:搭建开发环境
React Native学习笔记二:试水第一个项目
React Native学习笔记三:IDE的选择-VisualStudioCode
React Native学习笔记四:VSCode调试ReactNative项目
React Native学习笔记五:项目基本结构分析
React Native学习笔记六:IOS从OC更换成SWIFT
………………
一. 回顾
经过前面几个笔记的学习,环境的配置,相关依赖的安装,以及IDE的选择,我们基本上已经做好开发React Nativexian项目的准备了。
在正式开发前,我们还需要了解React Native项目的项目结构,这样会让我们的开发更得心应手。
二. 项目结构分析
1. 项目结构
我们还是拿之前新建的项目来折腾,在终端执行以下
cd YangBoProject
code .
打开项目我们会看到下图所示的项目结构
2. 结构描述
React Native结构描述
名称 | 描述 |
---|---|
_tests_ | 测试文件夹,执行命令 “npm test”会调用此文件夹,在文件夹中需要引入待测试文件。 |
.vscode | Visual Studio Code 配置文件,里面包含着仅适用于当前目录的VS Code的设置 |
android | Android的原生开发项目目录,包含了使用AndroidStudio开发项目的环境配置文件,可以用Android Studio打开进行原生开发。 |
ios | iOS原生开发项目目录,包含了XCode的环境,可以用Xcode打开进行原生开发 |
node_modules | 基于node文件依赖系统产生的相关依赖和第三方lib, 存放所有的项目依赖库,配置package.json之后执行“npm install”后自动创建的文件夹。 |
.babelrc | Babel的配置文件,Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。babelrc用来设置转码规则和插件。 |
.buckconfig | buck的配置文件,buck是Facebook推出的一款高效率的App项目构建工具。 |
.flowconfig | Flow 是 Facebook 旗下一个为 JavaScript 进行静态类型检测的检测工具。它可以在 JavaScript 的项目中用来捕获常见的 bugs,比如隐式类型转换,空引用等等。 |
.gitattributes | git属性文件设定一些项目特殊的属性。比如要比较word文档的不同;对strings程序进行注册;合并冲突的时候不想合并某些文件等等。 |
.gitignore | git配置文件,用于忽略你不想提交到Git上的文件 |
.watchmanconfig | watchman的配置文件,watchman用于监控文件变化,辅助实现工程修改信息。 |
app.json | 配置了name和displayName |
index.android.js | android的入口文件,可以在android的MainApplication中的ReactNativeHost中重写getJSMainModuleName()方法更改 |
index.ios.js | ios的入口文件,在Ios的AppDelegate.m文件的didFinishLaunchingWithOptions方法中通过jsBundleURLForBundleRoot可以更改入口文件 |
package.json | package.json定义了项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境 |
yarn.lock | Yarn 是 一个由 Facebook 创建的新 JavaScript 包管理器;每次添加依赖或者更新包版本,yarn都会把相关版本信息写入yarn.lock文件。这样可以解决同一个项目在不同机器上环境不一致的问题。 |
三. 结语
今天就学习到这,结构分析所涉及到知识点和内容比较多,我们只是做了大概的分析,粗略地了解整体结构。
我们开发过程中肯定需要知道得更加详细,后面的学习会逐步的了解。