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 .

打开项目我们会看到下图所示的项目结构

React Native学习笔记五:项目基本结构分析_第1张图片
项目结构

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

三. 结语

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

你可能感兴趣的:(React Native学习笔记五:项目基本结构分析)