React Native学习笔记五：项目基本结构分析

---

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文件。这样可以解决同一个项目在不同机器上环境不一致的问题。

三. 结语

  今天就学习到这，结构分析所涉及到知识点和内容比较多，我们只是做了大概的分析，粗略地了解整体结构。
  我们开发过程中肯定需要知道得更加详细，后面的学习会逐步的了解。