12、Zebreto应用开发全解析：从项目结构到响应式设计

Zebreto应用开发全解析：从项目结构到响应式设计

1. 项目概述与背景

在开发应用时，若用户答对卡片问题，应增加卡片强度，从而延长下次查看的间隔；若答错，则降低卡片强度，并尽快安排再次复习。以Zebreto应用为例，探讨构建完整应用时出现的模式和问题。

2. 项目结构

Zebreto项目的简化结构如下：

Zebreto
 |- .babelrc
 |- iOS
 |- index.ios.js
 |- node_modules
 |- package.json
 |- src
    |- actions.js
    |- components
    |- data
    |- stores
    |- styles

项目大致分为iOS和Android特定项目文件夹，以及 src/ 目录。 src/ 目录包含项目的所有React代码。 .babelrc 文件修改了默认的Babel配置，启用了ES6模块语法，示例如下：

// .babelrc
{
  "stage": 1,
  "optional": ["runtime"],
  "loose": "all",
  "whitelist": [
    "es6.modules"
  ]
}

src/ 目录下的代码按功能进一步组织：
- components/ ：存放所有R