ReactNative项目结构介绍

淡淡的烟草味﹌ 2022-05-14 00:43 274阅读 0赞

我使用的是webstorm来开发ReactNative项目  
作为一个初学者，首先要学习一下新建的RN项目的结构

![ReactNative][]

<table> 
 <thead> 
  <tr> 
   <th>文件名</th> 
   <th align="right">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>android</td> 
   <td align="right">Android文件所在的目录</td> 
  </tr> 
  <tr> 
   <td>ios</td> 
   <td align="right">IOS文件所在的目录</td> 
  </tr> 
  <tr> 
   <td>node_modules</td> 
   <td align="right">项目用到的库文件所在的目录</td> 
  </tr> 
  <tr> 
   <td>插件</td> 
   <td align="right">下面大多是一些插件不需要管</td> 
  </tr> 
  <tr> 
   <td>.babelrc</td> 
   <td align="right">es6代码转es5代码的插件。</td> 
  </tr> 
  <tr> 
   <td>.buckconfig</td> 
   <td align="right">facekbook的一个编译系统插件</td> 
  </tr> 
  <tr> 
   <td>.flowconfig</td> 
   <td align="right">静态代码检查的插件</td> 
  </tr> 
  <tr> 
   <td>.gitignore</td> 
   <td align="right">git提交的时候不需要提交的文件。ignore就是忽略的意思。</td> 
  </tr> 
  <tr> 
   <td>.gitattributes</td> 
   <td align="right">Git 以对一个特定的子目录或子文件集运用那些设置项。（这个我不太理解，也没有用过，可以参考 -&gt; Git - Git属性https://git-scm.com/book/zh/v1/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-Git%E5%B1%9E%E6%80%A7</td> 
  </tr> 
  <tr> 
   <td>.watchmanconfig</td> 
   <td align="right">监控文件变化的插件</td> 
  </tr> 
  <tr> 
   <td>app.json</td> 
   <td align="right">app的基本信息文件。配置了app的name</td> 
  </tr> 
  <tr> 
   <td>index.js</td> 
   <td align="right">新版本的RN生成的入口文件，以前是index.android.js和index.ios.js两个文件，现在合并成了index.js，是一个入口文件。</td> 
  </tr> 
  <tr> 
   <td>App.js</td> 
   <td align="right">这个index.js是一个入口文件，它最终会调用App.js</td> 
  </tr> 
  <tr> 
   <td>package.json</td> 
   <td align="right">主要是项目的配置信息</td> 
  </tr> 
  <tr> 
   <td>yarn.lock</td> 
   <td align="right">管理安装包的精确版本和所有的依赖，防止在不同的机器上环境不一致。</td> 
  </tr> 
 </tbody> 
</table>

PS:以上大部分文件都不需要我们修改，可能会修改的就只有App.js文件了。

[ReactNative]: /images/20220514/cfa09c2080d5425ca3d28dfa8e5de758.png