课程简介:
无论你是移动端OR前端开发者,至少要掌握一门 跨平台技术,这是移动端和前端发展的必然趋势,企业更青睐有跨平台技术的人才。课程浓缩老师多年跨平台实战经验,通过30+小案例和账号密码本APP,带你从入门到进阶,体系化提升RN跨平台技术应用能力,最后再带你高仿一个真实的企业APP(小红书),让你具备企业级APP的跨平台落地能力。
目录:
第1章 【课程介绍】把握整套课程知识结构和大纲
- 视频:1-1 课程导学(10:32)
- 视频:1-2 课程大纲介绍,从整体上了解本套课程的学习内容(05:17)
- 视频:1-3 课程知识导图展示,从框架上把握课程知识结构(02:28)
- 视频:1-4 课程代码,及资料下载方法(02:11)
第2章 【学前准备】了解ReactNative优势和本套课程的学习目标
- 视频:2-1 跨平台的优势和机遇,在移动端内卷的当下,只有跨平台才能破局重生(03:59)
- 视频:2-2 各种跨平台方案的百家争鸣(01:47)
- 视频:2-3 ReactNative和Flutter的比较,客观比较两者优缺点,从需选择(05:40)
- 视频:2-4 学习ReactNative的优势,增强学习本套课程的信心(00:48)
- 视频:2-5 ReactNative大厂级应用(00:51)
- 视频:2-6 本套课程的学习目标(01:40)
第3章 【开发环境搭建和 demo 运行】为正式学习做好前期准备
- 视频:3-1 开发环境介绍:JS端环境+Native端环境(03:28)
- 视频:3-2 安装node和watchman(01:00)
- 视频:3-3 安装VSCode(00:56)
- 视频:3-4 安装JDK和AndroidStudio(01:45)
- 视频:3-5 安装sdk platform和sdk tools(01:50)
- 视频:3-6 配置环境变量(01:13)
- 视频:3-7 AndroidStudio创建模拟器,及m1芯片创建方法(05:11)
- 视频:3-8 使用cli命令创建ReactNative工程,并启动运行(08:41)
第4章 为“原生开发”同学补充前端基础
- 视频:4-1 了解什么是ES5、ES6,掌握ES6常用的一些方法(26:15)
- 视频:4-2 了解什么是babel以及常见的配置(04:22)
- 视频:4-3 学习CSS-flex布局基础,为后面正式学习rn布局打下基础(12:49)
- 视频:4-4 npm是什么?npm如何检索、安装和卸载(02:45)
- 视频:4-5 使用nrm管理npm源(02:44)
第5章 为“前端开发”同学补充原生基础
- 视频:5-1 如何连接安卓设备以及开发中常用的adb命令(13:43)
- 视频:5-2 移动端ui结构和设备特性(06:11)
- 视频:5-3 RN开发中常见的原生文件(10:38)
- 视频:5-4 RN和原生组件对应关系(02:35)
- 视频:5-5 原生开发语言选择(03:16)
- 视频:5-6 移动端应用发布及主流的应用市场(07:04)
- 视频:5-7 移动端特有的生产热修复机制和应用场景(07:29)
- 视频:5-8 移动端设备的版本兼容选择(03:24)
第6章 【React基础知识和工程结构】掌握核心文件的用法和职能
- 视频:6-1 工程目录结构,了解关键文件作用(13:02)
- 视频:6-2 构建通用源码目录结构,好的工程从模块划分开始(07:06)
- 视频:6-3 package.json全局大管家文件(14:11)
- 视频:6-4 import和export,三种导入导出类型(09:58)
- 视频:6-5 class组件的标准写法和生命周期(23:52)
- 视频:6-6 函数式组件的优势和常用hook(31:38)
- 视频:6-7 JSX语法:高效开发源自于此(38:53)
- 视频:6-8 课后练习:RN计数器(03:16)
- 视频:6-9 作业答疑(07:00)
第7章 【夯实基础-系统组件精讲】全面掌握系统组件的使用方法以及各种属性的应用场景
- 视频:7-1 章节内容介绍(05:11)
- 视频:7-2 View:ui构建的基石,一切页面的起点(37:04)
- 视频:7-3 Text 使用占比最高的组件,使用简单,深入复杂(34:48)
- 视频:7-4 Image构建精美ui(29:24)
- 视频:7-5 ImageBackground-View和Image的结合(19:39)
- 视频:7-6 TextInput唯一且强大的输入组件(35:21)
- 视频:7-7 TouchableOpacity最好用的点击组件(13:37)
- 视频:7-8 TouchableHighlight使用略显麻烦的点击组件(06:40)
- 视频:7-9 TouchbaleWithoutFeedback几乎不用的点击组件(04:19)
- 视频:7-10 Button 使用简单但样式固定(05:48)
- 视频:7-11 强大的 Pressable(13:44)
- 视频:7-12 ScrollView 基础滚动组件(42:10)
- 视频:7-13 FlatList 高性能列表组件(40:49)
- 视频:7-14 SectionList 多类型分组列表(21:50)
- 视频:7-15 RefreshControl 下拉刷新(09:01)
- 视频:7-16 Modal 自定义弹窗(24:01)
- 视频:7-17 StatusBar 适配状态栏(11:04)
- 视频:7-18 Switch 开关切换(08:22)
- 视频:7-19 课后作业个人信息页面练习(05:28)
- 视频:7-20 作业答疑(13:17)
第8章 【夯实基础-常用API】深刻理解RN核心API的功能
- 视频:8-1 章节内容介绍(04:52)
- 视频:8-2 alert 和 console 你不知道的调试小技巧(28:45)
- 视频:8-3 Dimension 和 useWindowDimension 获取屏幕信息(13:04)
- 视频:8-4 Platform 获取平台属性(09:55)
- 视频:8-5 StyleSheet 构建灵活样式表(11:44)
- 视频:8-6 Linking 一个 api 节省 50 行代码(23:14)
- 视频:8-7 PixelRatio 像素比例工具(09:11)
- 视频:8-8 BackHandler 安卓返回键适配(07:53)
- 视频:8-9 PermissionsAndroid 轻松解决权限问题(08:39)
- 视频:8-10 Vibration 简单好用的震动交互(07:30)
- 视频:8-11 ToastAndroid 安卓平台的提示(05:35)
- 视频:8-12 Transform 矩阵变换的伪3D效果(10:26)
- 视频:8-13 Keyboard 键盘操作有神器(06:44)
- 视频:8-14 课后作业和本章小结(01:46)
第9章 【夯实基础-RN动画系统】全面掌握RN动画所有技巧,挑战90%动画效果
- 视频:9-1 简单示例学习基础动画方法(13:01)
- 视频:9-2 四大动画类型(12:29)
- 视频:9-3 六种支持动画的组件(03:05)
- 视频:9-4 平移动画的多种属性支持(04:05)
- 视频:9-5 Animated.decay 衰减动画函数(06:21)
- 视频:9-6 Animated.spring 弹性动画函数(14:17)
- 视频:9-7 Animated.timing 时间动画函数(16:13)
- 视频:9-8 Animated.ValueXY 矢量动画(03:27)
- 视频:9-9 四种组合动画(11:00)
- 视频:9-10 跟随动画延迟难题(10:11)
- 视频:9-11 自定义 Modal 背景动画(09:42)
- 视频:9-12 LayoutAnimation 超级简单又强大的布局动画(19:50)
- 视频:9-13 课后作业练习(03:15)
- 视频:9-14 内容小结(02:31)
第10章 【小试牛刀-练习项目,账号密码本】巩固强化基础阶段知识
- 视频:10-1 练习项目账号管理-演示与分析(06:48)
- 视频:10-2 初始化项目和页面框架(16:33)
- 视频:10-3 自定义封装添加账号弹窗(46:37)
- 视频:10-4 使用 UUID和AsyncStorage 保存账号数据(18:19)
- 视频:10-5 绘制账号列表 ui(25:08)
- 视频:10-6 账号列表实现展开收起功能(10:47)
- 视频:10-7 添加账号后实时刷新列表(03:47)
- 视频:10-8 实现账号列表细节交互(21:35)
- 视频:10-9 项目打包发布(05:37)
- 视频:10-10 本章小节(01:32)
第11章 【练兵场-TypeScript快速进阶】掌握企业级开发的必备利器
- 视频:11-1 TypeScript 介绍和优势(03:41)
- 视频:11-2 TypeScript 安装和项目配置(06:18)
- 视频:11-3 number、string、boolean 三大基础类型(11:28)
- 视频:11-4 数组、元组、枚举类型的使用(10:46)
- 视频:11-5 函数类型(06:31)
- 视频:11-6 类型文件和命名空间(07:21)
- 视频:11-7 课后作业和本章总结(01:33)
第12章 【进阶学习-Context上下文】深刻理解解耦的精髓
- 视频:12-1 Context 上下文介绍和演示(04:45)
- 视频:12-2 Context 实例演示应用主题配置(14:24)
- 视频:12-3 Context 内容小结(02:59)
第13章 【进阶学习-HOC高阶组件】掌握高阶组件强大的解耦和封装技巧
- 视频:13-1 HOC 高阶组件介绍(04:51)
- 视频:13-2 HOC 高阶组件案例演示1(15:26)
- 视频:13-3 HOC 高阶组件案例演示2(06:58)
- 视频:13-4 课后作业和本章小结(04:48)
第14章 【高手必学-memo与性能优化】掌握几种必备的memo应用技巧
- 视频:14-1 memo 与性能优化 函数式组件和 class 组件拦截多余渲染的方法(22:44)
- 视频:14-2 使用 useMemo 缓存计算结果(33:23)
- 视频:14-3 useMemo 缓存 ui 以及 useCallback 缓存回调函数(10:17)
- 视频:14-4 Hermes 引擎(03:14)
- 视频:14-5 本章小结(01:11)
第15章 【高手必学-ref转发】具备更强的自定义组件能力
- 视频:15-1 Ref转发案例演示1 外层操作原始组件(09:17)
- 视频:15-2 Ref转发案例演示2 对外暴露api(15:41)
- 视频:15-3 课后作业和本章小结(01:47)
第16章 【高手必学-桥接原生】精通4种桥接方式,让RN能力无限延伸
- 视频:16-1 桥接原生介绍(03:09)
- 视频:16-2 桥接原生实现JS调用原生方法(17:15)
- 视频:16-3 桥接原生实现JS层获取原生常量(05:13)
- 视频:16-4 桥接原生原子组件 实现原生组件(11:47)
- 视频:16-5 桥接原生原子组件 JS层调用原生组件(07:03)
- 视频:16-6 桥接原生原子组件 封装原生组件属性(11:19)
- 视频:16-7 桥接原生原子组件 原生事件回调(17:39)
- 视频:16-8 桥接原生原子组件 原生组件公开api给JS调用(15:54)
- 视频:16-9 桥接原生容器组件(16:30)
- 视频:16-10 课后作业和本章小结(01:39)
第17章 项目实战仿写小红书App【需求宣讲和前期准备】
- 视频:17-1 实战仿写小红书 App 实战项目指导大纲(04:40)
- 视频:17-2 实战仿写小红书App 功能演示和需求梳理(12:09)
- 视频:17-3 实战仿写小红书App 项目初始化和资源准备(11:55)
- 视频:17-4 实战仿写小红书App 导入并配置TypeScript和AsyncStorage(09:23)
第18章 项目实战仿写小红书App【路由管理和欢迎登陆页面】
- 视频:18-1 实战仿写小红书 App 路由管理安装和介绍(09:24)
- 视频:18-2 实战仿写小红书 App 构建导航栈并测试核心 Api(20:59)
- 视频:18-3 实战仿写小红书 App 实现欢迎页面和快捷登陆页面(42:13)
- 视频:18-4 实战仿写小红书 App 实现账号密码登陆页面(42:23)
- 视频:18-5 实战仿写小红书 App 欢迎登陆首页三连跳(05:20)
- 视频:18-6 实战仿写小红书 App 登陆页面交互细节优化(25:17)
第19章 实战项目-项目实战仿写小红书App【服务端接口与网络请求】
- 视频:19-1 实战仿写小红书App-nodejs服务介绍及使用方法 (08:03)
- 视频:19-2 实战仿写小红书App-封装Axios请求 (09:04)
- 视频:19-3 实战仿写小红书App-封装接口配置 (08:15)
- 视频:19-4 实战仿写小红书App-拦截接口响应 (05:52)
- 视频:19-5 实战仿写小红书App-使用Mobx和缓存实现完整登陆流程 (23:26)
第20章 实战项目-项目实战仿写小红书App【构建应用自定义主Tab页】
- 视频:20-1 实战仿写小红书App-构建基础底部Tab (19:56)
- 视频:20-2 实战仿写小红书App-自定义底部TabBar样式 (15:53)
- 视频:20-3 实战仿写小红书App-集成相册选择模块 (09:50
第21章 实战项目-高仿商业级小红书 App【构建应用首页瀑布流列表】
- 视频:21-1 实战仿写小红书App-搭建首页框架(15:28)
- 视频:21-2 实战仿写小红书App-实现列表显示和分页加载(40:54)
- 视频:21-3 实战仿写小红书App-实现瀑布流布局(12:09)
- 视频:21-4 实战仿写小红书App-自定义Heart实现点赞特效(24:20)
- 视频:21-5 实战仿写小红书App-封装TitleBar组件(25:43)
- 视频:21-6 实战仿写小红书app-封装CategoryList频道组件(27:45)
- 视频:21-7 实战仿写小红书App-自定义频道编辑弹窗(33:48)
- 视频:21-8 实战仿写小红书App-实现频道编辑数据修改(21:53)
- 视频:21-9 实战仿写小红书App-Toast和Loading小工具(04:32)
第22章 实战项目-高仿商业级小红书 App【实现文章详情及评论区展示】
- 视频:22-1 实战仿写小红书App-文章详情页面框架搭建(13:38)
- 视频:22-2 实战仿写小红书App-实现详情图片浏览(25:30)
- 视频:22-3 实战仿写小红书App-基本信息编写(09:20)
- 视频:22-4 实战仿写小红书App-嵌套评论列表1(17:30)
- 视频:22-5 实战仿写小红书App-嵌套评论列表2 (25:50)
- 视频:22-6 实战仿写小红书App-嵌套评论列表3(15:20)
第23章 实战项目-高仿商业级小红书 App【实现购物列表及搜索无缝切换】
- 视频:23-1 实战仿写小红书App-实现商品列表(30:24)
- 视频:23-2 实战仿写小红书App-顶部Top10品类(05:58)
- 视频:23-3 实战仿写小红书App-实现无缝搜索切换(16:32)
第24章 项目实战仿写小红书App【实现消息页面及气泡展示】
- 视频:24-1 实战仿写小红书App-实现消息列表头部(19:58)
- 视频:24-2 实战仿写小红书App-实现消息列表展示(15:43)
- 视频:24-3 实战仿写小红书App-实现悬浮菜单效果(14:28)
第25章 项目实战仿写小红书App【实现我的页面及侧拉菜单】
- 视频:25-1 实战仿写小红书App-我的页面头部信息-1 (08:58)
- 视频:25-2 实战仿写小红书App-我的页面头部信息-2 (25:40)
- 视频:25-3 实战仿写小红书App-动态高度和Tab切换 (20:02)
- 视频:25-4 实战仿写小红书App-列表渲染和空元素 (24:26)
- 视频:25-5 实战仿写小红书App-实现侧拉菜单1 (18:31)
- 视频:25-6 实战仿写小红书App-侧拉菜单与动效2 (21:27)
- 视频:25-7 实战仿写小红书App-登陆流程闭环 (07:16)
第26章 项目实战仿写小红书App【项目发布与热修复实践】
- 视频:26-1 热修复技术应用-RN热修复两大框架介绍 (10:19)
- 视频:26-2 热修复技术应用-安装Pushy模块与创建应用 (11:46)
- 视频:26-3 热修复技术应用-代码集成热修复加载流程 (17:11)
- 视频:26-4 热修复技术应用-发布补丁并成功加载 (11:03)
- 视频:26-5 热修复技术应用-6处流程细节优化 (14:00)
第27章 课程总结与未来展望
视频:27-1 课程总结与未来展望 (07:35)