SuperAPI AI 工具集

react-native-patterns

编程与开发

查看项目

更新于 10-16 05:37

技能介绍

React Native Patterns for Frappe Mobile Apps 是一份速查参考,用于构建与 Frappe 后端集成的 Expo React Native 应用。

用途

为开发对接 Frappe 后端的移动应用提供一套可复用的代码模式参考,聚焦集成层与常见业务场景,减少重复摸索。

应用概况

资料给出的示例应用位于 chatnext-mobile-old/ 目录,技术栈为 React Native 0.71 + Expo ~48 + React Navigation v6 + Redux Toolkit + TanStack React Query v4 + Axios。

Frappe API 集成

所有 API 调用都通过预配置的 Axios 实例进行,先导入 apiClient,再调用。POST 到白名单方法后,Frappe 会把响应包裹在 .message 中,因此通过 res.data.message 取结果;GET 资源请求的列表结果则位于 .data 中,通过 res.data.data 获取。认证头(站点名 + CSRF 令牌)由 src/utils/apiClient.ts 中的请求拦截器自动注入。

资料列出的规范运输端点要求始终使用 transporter 应用,不要使用 edu_quality.api.transport.*,包括 create_journey、add_gps_log、end_journey_api、get_active_journey、cleanup_room_silent 等 POST/GET 方法。考勤端点使用 mark_entry;路线相关端点使用 get_route_list_with_stops 与 get_route_student_attendance。

React Query v4

资料特别提示 v4 使用位置参数,而非 v5 的对象语法。查询使用 useQuery,传入 key 数组、请求函数与配置项(如 staleTime、enabled、retry);变更使用 useMutation,并在 onSuccess 中通过 queryClient.invalidateQueries 失效相应查询,onError 中处理错误。

Redux Toolkit

使用 useSelector 从 store 读取状态(示例读取 s.path.baseURL),使用 useDispatch 派发动作(示例派发 setBaseURL)。

React Navigation

使用 useNavigation 与 useRoute 获取导航与路由对象,可调用 navigate 跳转页面并传递参数、调用 goBack 返回,在 AppNavigation.tsx 中通过 Stack.Screen 注册新页面。

网络感知

通过 useNetwork 获取 isConnected、isInternetReachable、onConnectionRestored,在离线时跳过、排队或展示离线 UI,并可在连接恢复时触发 refetch。

定位(GPS)

使用 expo-location:先调用 requestForegroundPermissionsAsync 申请前台权限,未授权则返回;单次定位使用 getCurrentPositionAsync;持续监听使用 watchPositionAsync,可设置精度、时间间隔与距离间隔,使用前需校验经纬度是否有效,结束后调用 sub.remove() 清理。

运输行程生命周期

资料给出流程:启动时 TransportDashboard.tsx 调用 fetchActiveJourney(),若找到行程则 setIsStartJourney(true) 以实现崩溃恢复;开始行程由 LocationTracker.tsx 调用 createJourney,返回 journey_id、websocket_room 与 status(success 或 resumed);GPS 记录每 30 秒调用 sendGpsLog,传入当前位置、优化路线、当前站点索引与房间 ID;考勤由 AttendanceScreen.tsx 调用 mark_entry;结束行程调用 endJourney。

考勤打点

资料给出后端期望的 reason 格式:拼接受 isPickup 影响的 'Pickup' 或 'Drop' 与 ' - Double-tap onboard'。请求体包含 student、status、reason、date、time 字段。

AsyncStorage

提供 setItem 保存、getItem 读取、removeItem 删除的用法示例。

推送通知

使用 expo-notifications:通过 getExpoPushTokenAsync 获取令牌并注册到后端;通过 setNotificationHandler 处理前台通知的展示、声音与角标设置。

构建命令

进入 chatnext-mobile-old 后可使用:npx expo start --dev-client 开发调试自定义原生模块;npx expo run:android 与 npx expo run:ios 在设备或模拟器上运行调试版本;eas build 分别构建 Android 的 preview APK、production AAB 与 iOS 的 production IPA。

限制与注意事项

资料强调发送到服务器前必须验证 GPS 坐标,给出 isValidCoord 校验函数,检查是否为 NaN、纬度在 -90 到 90、经度在 -180 到 180,且经纬度不同时为 0。此外,资料提醒 React Query v4 与 v5 语法不同,需按 v4 的位置参数写法使用。关于该模式的授权许可、维护状态、版本兼容范围以及是否支持 Frappe 之外的后端,资料暂未提供。