chevron_left

React Native + Expo 项目实战

未发布
第 65 回

课程辅导专享

React Native + Expo 项目实战 - 用户首页

2025年12月21日更新
React Native + Expo 项目实战 购买课程辅导服务 39.9元

解锁课程讲义 / 课程辅导群 / 一对一远程协助 / 专享额外课程 / 超前学习权限

课程辅导 QQ 群:719841339

遇到问题,咨询客服 QQ: 124765984

注意,您现在浏览的是未发布的课程:
相关内容并不一定完善,而且随时可能会出现变更。
正式内容,请等待课程发布后再浏览。

第 65 回 用户首页

课程介绍

前面几节课,我们完成了用户认证系统的所有功能:登录、注册、退出、Token 管理、键盘处理、账户注销等。现在用户可以正常登录我们的应用了,但登录后进入用户页面,却发现只是一个简单的测试界面,没有展示任何用户信息。这显然不够专业。一个完整的应用,应该有一个美观、实用的用户主页,展示用户的个人信息、学习数据等内容。

大家好,这里是东哥。您现在收看的是「长乐未央全栈系列:React Native 项目实战」课程的第 65 回,用户首页,在这节课里,我们将探讨:

  • 如何设计一个用户主页的 UI 结构?
  • 如何使用 ScrollableTabView 实现多 Tab 切换?
  • 如何复用已有的组件展示点赞的课程?
  • 如何使用 TableView 展示用户的详细信息?
  • 如何封装通用的 Cell 组件简化代码?

这节课没有新的技术点,主要是将之前学过的知识进行综合运用,实现一个完整的用户主页。这也是实际开发中的常态:80% 的时间都是在复用和组合已有的技术,而不是学习新东西。

需求分析和设计思路

页面效果预览

...

课程介绍

React Native,是一种只需要用JavaScript,就能开发原生应用的技术。使用React Native,可以直接调用原生组件,性能非常强大。 React Naitve支持iOSAndroidWindowsmacOS鸿蒙 Next以及Web开发。

Facebook、Instagram、Office、Skype、Shopify、京东、百度等大量知名应用,也都使用了React Native技术来开发。

课程一共分为四个部分:

  • 基础篇:里面是React Native基础用法、常用组件,也包括React Hook的用法。
  • 路由篇:项目都是由多个页面组成的,它们之间互相跳转、参数传递、路由和TabBar的配置,都在这里学习。
  • 实战篇:打好基础后,就要开始项目实战了。我们从零开始,一点点完成一个真实的项目。
  • 发布篇:最后,在开发完成后,终于可以发布到应用商店了,让大家都羡慕你的成就。

在学习完成以后,还有两个部分,给想进一步提高的同学学习:

  • 进阶篇:会在实战篇的基础上,进一步增加项目功能,优化用户体验。在这里会学习一些高级点的开发技巧。
  • 番外篇:是与课程实战项目无关的额外内容,但也都是在某些情况下会用到的东西。

资源下载

※禁止在课程以外其他地方使用

play_arrow
1
课程介绍
play_arrow
2
基础篇:使用 Expo 创建 React Native 项目
play_arrow
3
安装 iOS 与 Android 模拟器
play_arrow
4
Expo 操作指南
play_arrow
5
初识 React Native
play_arrow
6
React Native 中的样式
play_arrow
7
Hook 之 useState 状态管理
play_arrow
8
使用 map 遍历并渲染数据
play_arrow
9
运行真实项目接口
play_arrow
10
React Native 发起网络请求
play_arrow
11
Hook 之 useEffect 自动运行
play_arrow
12
useEffect 的依赖项实现搜索课程
play_arrow
13
自定义组件:加载中
play_arrow
14
自定义组件:网络错误
play_arrow
15
实现重新加载(子组件、props)
play_arrow
16
环境变量与封装 Fetch 请求
play_arrow
17
自定义 Hook:请求接口
play_arrow
18
Hook 之 useReducer 统一管理状态
play_arrow
19
Hook 之 useContext 全局共享数据
play_arrow
20
使用 ScrollView 组件
play_arrow
21
使用 FlatList 组件
play_arrow
22
React Native 其他常用组件
play_arrow
23
路由篇:安装配置 Expo Router
play_arrow
24
使用 Link 组件跳转
play_arrow
25
布局文件、Stack 与 Slot
play_arrow
26
使用 router 方法跳转
play_arrow
27
动态路由与参数传递
play_arrow
28
设置导航栏标题
play_arrow
29
使用布局文件配置导航栏
play_arrow
30
使用自定义组件配置导航栏
play_arrow
31
TabBar 的标准配置方法
play_arrow
32
配置 TabBar 的图标和样式
play_arrow
33
配置模态页(Modal)
play_arrow
34
实战篇:正式项目目录结构与 Prettier 格式化代码
play_arrow
35
定义 src 路径别名:@
play_arrow
36
更新 Expo SDK 及相关依赖包
play_arrow
37
Expo Go 的便捷安装方法 & 网易 MuMu 模拟器的使用
play_arrow
38
全网首发!适配 iOS 26 液态玻璃之:TabBar(上)
play_arrow
39
全网首发!适配 iOS 26 液态玻璃之:导航栏(中)
play_arrow
40
全网首发!适配 iOS 26 液态玻璃之:Android 兼容处理(下)
play_arrow
41
开发 App 首页:推荐的课程
play_arrow
42
首页:拆分组件
play_arrow
43
液态玻璃 TabBar 遮挡页面问题
play_arrow
44
首页:实现下拉刷新(RefreshControl)
play_arrow
45
通知列表:FlatList 使用细节
play_arrow
46
通知列表:触底加载更多(onEndReached)
play_arrow
47
自定义 Hook:useLoadMore 实现加载更多
play_arrow
48
通知详情:React Native WebView 的使用
play_arrow
49
自定义组件:带进度条的 WebView
play_arrow
50
设置页:好用的列表 clwy-react-native-tableview-simple
play_arrow
51
访问网页的三种方式:Linking、WebBrowser 与 WebView
play_arrow
52
更好的用户体验:WebView 结合 WebBrowse
play_arrow
53
课程列表:clwy-expo-scrollable-tab-view 滚动的 Tab 栏
play_arrow
54
课程详情:用 FlatList 构建整个页面
play_arrow
55
课程详情:分享功能
play_arrow
56
章节页:react-native-side-menu-updated 侧边栏的实现
play_arrow
57
章节页:expo-video 视频播放器
play_arrow
58
登录认证(上):最基础的实现
play_arrow
59
登录认证(中):对接真实接口,实现登录功能
play_arrow
60
登录认证(下):使用 Token 访问需要认证的接口
play_arrow
61
安全退出与登录超时
play_arrow
62
用户注册页
play_arrow
63
解决键盘遮挡表单问题:react-native-keyboard-controller
play_arrow
64
上架强制要求:注销账户
play_arrow
65
用户首页
play_arrow
66
点赞功能
play_arrow
67
个人信息变更
play_arrow
68
自动更新用户页:useFocusEffect 与 useCallback 的使用
play_arrow
69
搜索页:自定义函数,修复 urlcat 问题
play_arrow
70
上架发布篇:上架前的准备工作