Day 04 专案结构

今天是第四天，我们来解说一下昨天建好的专案吧

那首先，我们先看看昨天的专案跑起来的画面吧

因为我们是开发 App ，不是像 Web 那样可以直接在浏览器上看到结果，

所以，我们必须先把 App 建好，然後再指定的模拟器上安装，最後才能看到结果

但是 react-native cli 都帮我们把这个给处理好了

那我们只要执行相关指令就可以看到结果罗

React Native Cli Command

要运行 React Native 的功能都会绕不开执行 React Native Cli

那到底有那些功能呢？？

先来说说目前会用到的

react-native init [project name]

这我们昨天就用过了，建立初始专案

react-native run-ios

把我们的专案打包成 App 并安装到 iphone 模拟器里

假如有指定要哪个版本的 iphone ，在指令後面加上 --simulator [iphone version]

EX:

react-native run-ios --simulator iPhone 8

没有指定的话就是，目前最新的

react-native run-android

把我们的专案打包成 App 并安装到 android 模拟器或指定装置里

专案结构

从 vscode 打开我们建好专案的资料夹

可以清楚看到我们的专案结构是这样...

现在先稍微介绍几个比较需要知道的部份

tests

测试档案的资料夹

android

原生 android 相关设定档、套件的资料夹

ios

原生 ios 相关设定档、套件的资料夹

node_modules

开发专案的相关套件

App.js

root component

app.json

整个 App 的设定档

index.js

程序进入点

metro.config.js

metro bundler 的设定档

package.json

专案描述档