ReactNative进阶（二）：ReactNative项目文件结构介绍

素颜马尾好姑娘i 2023-01-15 08:27 218阅读 0赞

### 文章目录 ###

*   *  前言
     *  优质博文

--------------------

## 前言 ##

在学习一门新语言，搭建完新项目时，有必要了解下项目结构。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

`android`:Android原生工程目录；

`ios`:IOS原生工程目录；

`package.json`:React Native是基于javasript开发的语言，使用npm做为包管理，这个文件就是npm的包管理的文件，主要配置我们依赖的第三方包；

`index.js`:这个文件是IOS和Android在相应设备上打包运行的入口文件；（备注：早期React Native项目应该是`index.ios.js`和`index.android.js`两个单独的入口文件）

`img`：存放界面要显示的png图片；

`public`：存放工具js，网络请求js的封装，数据存储js等相关操作的js；（备注：可以在public中创建分类目录，`public/net、public/datastorage`等）

`scene`：存放项目的JS组件（界面）；（备注：可以在scene目录下创建不同功能模块的目录，例如`scene/draw,scene/user,scene/home`等二级三级目录）

## 优质博文 ##

*  《[ReactNative进阶（一）：ReactNative学习资料汇总][ReactNative_ReactNative]》
 *  《[ReactNative进阶（三）：ReactNative项目启动原理介绍][ReactNative_ReactNative 1]》
 *  《[ReactNative进阶（四）：ReactNative原理剖析之JS 层渲染之 diff 算法][ReactNative_ReactNative_JS _ diff]》
 *  《[ReactNative进阶（五）：ReactNative原理剖析之 Native层的渲染流程][ReactNative_ReactNative_ Native]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221022/0553fa06b071481080e0e72890f9657f.png
[ReactNative_ReactNative]: https://shq5785.blog.csdn.net/article/details/116484650
[ReactNative_ReactNative 1]: https://shq5785.blog.csdn.net/article/details/116004605
[ReactNative_ReactNative_JS _ diff]: https://shq5785.blog.csdn.net/article/details/116015328
[ReactNative_ReactNative_ Native]: https://shq5785.blog.csdn.net/article/details/116015909