🚀 React Native开发神器！react-native-architecture Skill让你离线同步和原生模块轻松搞定😱

核心功能

这套架构的核心在于其精心设计的模式，解决了React Native开发中的常见痛点：

• 现代化项目结构：基于Expo Router，采用清晰、可扩展的文件式目录结构，让你的代码库从第一天起就井井有条。
• 强大的导航系统：利用Expo Router实现声明式、文件驱动的路由。无论是标签页导航、堆栈导航还是模态框，都能轻松搞定，代码优雅且易于维护。
• 无缝的认证流程：内置了一套完整的用户认证流程，使用SecureStore安全存储令牌，并通过React Context实现全局状态管理，自动保护路由，让用户登录和权限控制变得前所未有的简单。
• 离线优先架构：这绝对是王炸功能！🔥通过与TanStack React Query和AsyncStorage Persister的深度集成，你的应用天生就支持离线访问。数据自动缓存，网络状态变化时自动同步，即使在网络不稳定的环境下也能提供流畅的用户体验。
• 原生模块轻松调用：封装了常用的原生API，如触感反馈（Haptics）、生物识别（Biometrics）和推送通知。你无需编写任何原生代码，就能为你的App增加细腻的交互体验和核心功能。
• 极致的性能优化：默认使用@shopify/flash-list替代FlatList，并通过memo和useCallback等技术手段，确保长列表也能拥有丝滑的滚动性能。
• 自动化构建与发布：集成了Expo Application Services (EAS)，只需一个eas.json配置文件和几行命令，就能实现应用的云端构建、内测分发和一键提交到App Store与Google Play。

适用平台

这个Skill简直是现代AI编程助手的“最强外挂”！它完美适配所有主流的AI编程工具和IDE，包括但不限于：

• Cursor
• GitHub Copilot
• Claude Code
• OpenAI Codex
• Gemini Code Assist
• 文心快码
• 腾讯云 CodeBuddy
• 华为云 CodeArts

当你使用这些AI助手时，这套成熟的架构提供了丰富的、高质量的上下文。AI能更好地理解你的项目意图，从而生成更精准、更符合项目规范的代码。它不再是零散的代码片段生成器，而是你真正的架构级合作伙伴。

实操代码示例

感受一下“离线优先”的魅力。通过一个简单的Provider配置，你的整个应用就具备了数据持久化和离线访问能力。

// providers/QueryProvider.tsxnimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';nimport { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';nimport { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';nimport AsyncStorage from '@react-native-async-storage/async-storage';nimport NetInfo from '@react-native-community/netinfo';nimport { onlineManager } from '@tanstack/react-query';nn// 监听网络状态并同步给React QuerynonlineManager.setEventListener((setOnline) => {n  return NetInfo.addEventListener((state) => {n    setOnline(!!state.isConnected);n  });n});nnconst queryClient = new QueryClient({n  defaultOptions: {n    queries: {n      gcTime: 1000 * 60 * 60 * 24, // 24小时缓存n      staleTime: 1000 * 60 * 5, // 5分钟数据新鲜期n      retry: 2,n      networkMode: 'offlineFirst', // 核心：离线优先模式n    },n    mutations: {n      networkMode: 'offlineFirst',n    },n  },n});nnconst asyncStoragePersister = createAsyncStoragePersister({n  storage: AsyncStorage,n  key: 'REACT