[中字] React Native 美食外卖应用开发实战（中

文字幕英文视频教程） 课程遵循 “从 0 到 1 构建产品” 的逻辑，分为 9 大模块、62 个知识点，每个模块聚焦一个核心功能模块，配套对应的视频讲解与源码文件，确保 “学完即能用”。以下是各模块的核心内容拆解： 1. 入门与环境搭建（模块 1：Introduction） 作为课程的基础模块，本部分聚焦 “让项目跑起来”，涵盖 3 个关键环节： 环境配置（Setup）：详细讲解 React Native 项目的初始化流程，包括依赖安装、模拟器配置、开发工具设置，解决新手常见的环境报错问题； 上下文提供者集成（Hooking Context Providers to app）：介绍 React Context 的核心概念，演示如何在项目中配置全局状态容器，为后续用户信息、定位数据等全局状态管理打下基础； 用户定位功能实现（Getting user location with expolocation）：借助 expolocation 库获取设备地理位置，讲解定位权限申请、坐标获取与异常处理，是外卖 App “附近商家” 功能的核心前置步骤。 本模块配套 5 个视频（含中文字幕），源码包含项目初始目录结构与基础配置文件，学习者可直接复用配置，跳过繁琐的环境调试环节。 2. 首页核心功能开发（模块 2：Home section） 首页是用户接触 App 的第一入口，本模块聚焦 “打造高体验的首页界面”，涵盖 8 个核心知识点： 首页头部组件（Home header）：实现包含 “用户定位显示、搜索框、个人中心入口” 的头部布局，支持定位信息实时更新； 图片组件封装（Asset Image Component）：讲解本地图片资源的优化加载方案，封装可复用的 AssetImage 组件，解决 React Native 图片显示模糊、加载慢的问题； 地理编码转换（Reverse Geocoding）：将定位获取的经纬度转换为具体地址（如 “XX 街道 XX 号”），实现 “附近商家” 功能的地址展示逻辑； 分类列表（Category List）：开发横向滚动的美食分类导航（如 “汉堡、寿司、中餐”），包含分类选中状态切换、点击事件处理（HandleSelection function）； 商家列表实现（Nearby Restaurants Flatlist）：使用 FlatList 组件构建 “附近商家” 列表，优化长列表渲染性能； 商家卡片组件（Store Component）：封装包含 “商家名称、评分、配送时间、起送价” 的商家卡片，支持组件复用与样式统一； 通用组件封装：开发 Divider（分割线）、Heading（标题）等通用组件，建立项目的组件化规范； 时间工具函数（Creating time function）：实现 “配送时间计算、营业时间显示” 等时间相关工具函数，适配外卖场景的时间展示需求。 本模块源码包含完整的首页目录结构，组件文件（如 HomeHeader.jsx、CategoryList.jsx）可直接导入项目使用，同时提供主题配置文件（theme.js）与静态数据文件（uidata.js），支持快速修改颜色、字体、分类数据等配置。 3. 美食详情页开发（模块 3：Food Screen） 美食详情页是用户决策 “是否下单” 的关键页面，本模块聚焦 “详情页交互与数据传递”，涵盖 13 个知识点： 美食列表组件（NewFoodsList、FastestNearYou）：实现 “新品推荐、最快送达” 等美食列表，支持横向 / 纵向滚动布局； 美食卡片组件（Food Component）：封装包含 “美食图片、名称、价格、评分” 的卡片，支持点击跳转详情页； 导航配置（Food navigator）：使用 Stack Navigator 搭建美食相关页面的导航栈，讲解 “列表页跳详情页” 的数据传递方案（如通过 route.params 传递美食 ID、商家信息）； 详情页状态管理（FoodPage State variables）：定义详情页所需的状态（如选中的配料、数量、用户备注），使用 useState 管理局部状态； 交互组件开发：实现按钮（Buttons）、商家跳转按钮（Restaurant Btn）、标签列表（Tags FlatList，如 “辛辣、素食、热销”）、复选框（BouncyCheckBox，用于配料选择）、备注输入框（Preference TextInput）； 配料选择逻辑（Food Additives）：处理 “可选配料” 的选中 / 取消逻辑，实时计算添加配料后的价格，为后续购物车计算打下基础。 本模块源码包含详情页完整逻辑，特别是 “数据传递” 与 “状态管理” 的实现方案，可直接参考用于其他场景（如商品详情、订单详情）的开发。 4. 购物车与订单管理（模块 4：Cart section） 购物车与订单是外卖 App 的核心交易环节，本模块聚焦 “购物车状态同步与订单数据处理”，涵盖 9 个知识点： 计数器组件（Counter）：开发支持 “加 / 减数量” 的计数器，限制最小数量为 1，避免负数问题； 购物车状态管理（Cart Context）：借助 React Context 创建全局购物车状态，实现 “添加商品、删除商品、修改数量” 的全局同步（如详情页添加商品后，底部 Tab 的购物车数量实时更新）； 订单页面开发（Cart and Orders）：实现购物车页面的布局，包含 “商品列表、选中商品、总价计算”，支持删除购物车商品； 订单模态框导航（Navigate to order modal）：讲解如何通过导航跳转订单确认模态框，传递购物车数据； 配料价格计算（CalculatePrice）：实现 “商品基础价 + 选中配料价 × 数量” 的总价计算逻辑，处理价格精度问题（如保留 2 位小数）； 购物车数据结构设计（Creating cart object）：定义规范的购物车数据格式（包含商品 ID、名称、价格、选中配料、数量），确保数据可追溯、易维护； 订单数据封装（Creating order item）：将购物车数据转换为订单格式，包含用户信息、收货地址、支付金额等字段，为后续订单提交打下基础。 本模块源码包含 CartContext.jsx（购物车全局状态）、Cart.jsx（购物车页面）、OrderPage.jsx（订单页面），完整覆盖 “加购 - 计算 - 下单” 的核心流程，可直接复用或修改适配不同的交易场景。 5. 标签页导航与商家详情（模块 5-6：Tabview、Restaurant ratings） 这两个模块聚焦 “商家相关功能”，解决 “多页面切换” 与 “用户评价” 的核心需求： 标签页导航（Tabview）：使用 TabView 组件实现商家详情页的多标签切换（如 “菜单、评价、商家信息”），支持左右滑动切换与标签选中状态同步； 商家评分功能（Restaurant ratings）：开发商家评分页面（AddRating.jsx），支持用户选择星级、输入评价内容，展示其他用户的评价列表； 商家基础信息展示（Restaurant Title and Time）：实现商家详情页的头部布局，包含 “商家名称、评分、配送时间、距离、营业时间”； 通用头部组件（ReusableHeader）：封装支持 “返回按钮、标题、右侧操作” 的通用头部，适配商家详情、评价页等多个页面，减少重复代码。 本模块源码包含 TabView 的配置方案与评分组件的实现逻辑，特别是 “标签页性能优化”（如懒加载未显示的标签页）的细节，可参考用于其他多标签场景。 6. 地图与导航功能（模块 7：Google Maps and Directions） 地图导航是外卖 App 的 “差异化功能”，本模块聚焦 “地理位置可视化与路线规划”，涵盖 7 个知识点： 地图组件集成（Google Maps）：讲解如何在 React Native 中集成地图组件，展示用户当前位置与商家位置的标记（PlaceMarker）； 距离与时间计算（Calculating Distance and Time）：借助地图 API 计算用户与商家之间的直线距离、预计配送时间，展示在商家详情页； 路线规划（Fetch Directions）：调用地图 API 获取用户到商家的导航路线，使用 PolyLines（折线）在地图上绘制路线，直观展示导航路径； 全局商家数据管理（Restaurant Context）：通过 Context 将商家数据（如地址、坐标）全局共享，避免多页面间重复传递数据； 原生地图跳转（Address and open the native maps）：实现 “点击地址跳转系统地图（如高德、百度地图）” 的功能，支持直接导航到商家； 地图工具封装（GoogleApiServices.js）：封装地图 API 的调用函数（如路线查询、距离计算），统一处理 API 请求、响应解析与异常捕获。 本模块源码包含 GoogleMapView.jsx（地图组件）、Directions.jsx（路线页面），完整覆盖地图相关功能的实现，同时提供 API 调用的封装方案，便于后续替换为其他地图服务商（如高德地图、百度地图）。 7. 美食菜单与列表优化（模块 8：Food tile） 本模块聚焦 “商家菜单页的用户体验优化”，涵盖 4 个知识点： 菜单列表实现（Menu flatlist）：使用 FlatList 构建商家菜单列表，支持按分类分组（如 “招牌菜、主食、饮品”），优化长列表的渲染性能； 美食卡片优化（FoodTile Component）：封装更精致的美食卡片，包含 “图片、名称、价格、简短描述、加购按钮”，支持点击加购到购物车； 卡片阴影效果（FoodTile Shadows）：优化卡片的阴影样式，适配 iOS 与 Android 双平台的阴影差异，提升界面质感； 加载状态优化：配套 Shimmers 文件夹下的骨架屏组件（HorizontalShimmer.jsx、ReusableShimmer.jsx），实现菜单列表的加载占位效果，减少用户等待焦虑。 本模块源码中的 FoodTile.jsx 可直接复用为 “商品卡片”，骨架屏组件也可适配其他列表场景（如首页商家列表、搜索结果列表）。 8. 用户系统与个人中心（模块 9：Login context and profile） 用户系统是 App 实现 “个性化体验” 的基础，本模块聚焦 “登录状态管理与个人中心开发”，涵盖 2 个核心知识点： 登录状态管理（Login Context）：创建全局登录上下文，管理用户登录状态（登录 / 未登录）、用户信息（如用户名、头像、手机号），实现 “登录后全局状态同步”（如个人中心显示用户信息、未登录时跳转登录页）； 个人中心组件开发：实现个人中心页面（Profile.jsx）的布局，包含 “用户头像、个人信息卡片、订单入口、设置入口”，开发返回按钮（BackBtn.jsx）适配多页面的返回逻辑； 登录 / 注册页面（LoginPage.jsx、SignUp.jsx）：提供基础的登录 / 注册页面模板，包含表单验证、按钮交互逻辑，学习者可基于此扩展手机号验证码、密码重置等功能。 本模块源码包含 LoginContext.jsx（登录状态管理）、Profile.jsx（个人中心），为用户系统提供完整的基础框架，便于后续扩展会员体系、积分系统等功能。