示例成品 · 平台演示，按左边这组点选真跑出来的
这事不用从头规划，先按“数据链路”查：**按钮 → 弹窗 → 请求群列表 → 渲染列表**。群列表不加载，多半不是界面丑，是这条链路没通。
## 1. 先定位问题，只查 3 处
你现在是原型，问题基本出在下面几类：
- 点击发群后，弹窗有没有出来？
- 没出来：按钮事件没绑定，或弹窗组件没挂上。
- 弹窗出来了，但一直转圈或空白？
- 请求没发出去、接口没通、字段对不上。
- 接口有返回，但列表不显示？
- 前端渲染逻辑没更新，或字段名读错。
先按这个顺序查，别一上来改整个页面。
## 2. 发群功能最终流程定成这样
1. 主页点【发群】按钮。
2. 弹出群选择器，半屏弹窗或新页面都行。
3. 自动请求“我的群列表”。
4. 列表展示：群头像、群名、成员数。
5. 用户点一个群。
6. 进入发送编辑页或发送确认弹窗。
7. 发送成功后关闭选择器，回到主页提示“已发送”。
## 3. 原型必须补的 5 个状态
原型一般只画了“有群”的状态，所以一遇到空数据或报错就白屏，看起来像“不加载”。
- 加载中：转圈或骨架屏。
- 加载成功：显示群列表。
- 空数据：显示“暂无群，请先创建或加入群”。
- 加载失败：显示“群列表加载失败”+【重试】按钮。
- 登录过期：直接跳登录。
## 4. 接口定义先定死
前后端都按这个来，别一边叫 `groupName`，一边叫 `name`。
```http
GET /v1/groups?type=can_send
Authorization: Bearer <token>
```
返回示例：
```json
{
"code": 0,
"data": {
"list": [
{
"groupId": "1001",
"groupName": "测试群",
"avatar": "https://xxx/1.png",
"memberCount": 12,
"canSend": true
}
]
}
}
```
前端字段名和这个保持一致，不要自己另起一套。
## 5. 前端改造步骤，照着做
1. 发群按钮点击后，先打开弹窗。
2. 弹窗打开时调用 `getGroupList()`。
3. 请求前 `loading = true`，请求结束后 `loading = false`。
4. 返回的 `list` 存进 `state`。
5. 用 `FlatList` / `RecyclerView` 渲染，不要用绝对定位拼列表。
6. 点击某一项后，把 `groupId` 和 `groupName` 传给发送流程。
7. 发送按钮加 `loading`，防止重复点击。
前端伪代码给你参考：
```js
async function openGroupPicker() {
showPicker = true;
loading = true;
try {
const list = await api.getGroups();
groups = list;
} catch {
error = true;
} finally {
loading = false;
}
}
```
如果你现在只有原型、没有后端接口，先 mock 一个假接口，返回 2 条群数据，让“弹窗 → 加载 → 列表 → 选中 → 发送”整条流程先跑通，再接真实接口。
## 6. 验收标准，真实账号走一遍
1. 用真实账号登录。
2. 确认这个账号至少加入 1 个群。
3. 主页点【发群】。
4. 群列表 1 秒左右弹出来，不白屏。
5. 选中一个群，能进入发送流程并发送成功。
6. 断网点【发群】，显示失败 + 重试，重试后能恢复。
7. 换一个没有群的账号，显示空状态，不卡死。
## 7. 如果还加载不出来，优先查这 5 点
1. 接口没通：抓包看是不是 404 / 500 / 401。
2. token 没带或过期。
3. 字段名对不上：接口返回 `groupName`，前端读的是 `name`。
4. 群列表为空，但没做空状态，看起来像“没加载”。
5. 弹窗被其他层级盖住，实际弹了但看不到。
先不要在原型上继续堆细节，按这个把数据链路打通，功能就能用。
点左边「开工 · 直接出成品」，出一份你自己的版本（文字免费）