Agent Skills
› cosmicstack-labs/mercury-agent-skills
› react-native-patterns
react-native-patterns
GitHub提供 React Native 高性能跨平台应用开发的最佳实践，涵盖项目结构、React Navigation 导航模式、性能优化策略（如 Memo、FlatList）、原生模块集成及多平台适配方案。
Trigger Scenarios
询问 React Native 项目架构或目录结构
需要实现页面导航逻辑
遇到 App 性能瓶颈寻求优化建议
需要集成原生模块或使用 Turbo Modules
处理 iOS 和 Android 平台差异
Install
npx skills add cosmicstack-labs/mercury-agent-skills --skill react-native-patterns -g -y
SKILL.md
Frontmatter
{
"name": "react-native-patterns",
"metadata": {
"tags": [
"react-native",
"mobile",
"cross-platform",
"javascript",
"react"
],
"author": "cosmicstack-labs",
"version": "1.0.0",
"category": "mobile"
},
"description": "Navigation, state management, native modules, performance, animations, and cross-platform strategies"
}
React Native Patterns
Build performant cross-platform mobile apps with React Native.
Architecture
Project Structure
src/
├── components/ # Reusable UI components
├── screens/ # Screen-level components
├── navigation/ # React Navigation config
├── services/ # API, storage, native modules
├── hooks/ # Custom hooks
├── store/ # State management
├── utils/ # Helpers
└── types/ # TypeScript types
Navigation (React Navigation)
// Stack + Tab pattern
const RootStack = createNativeStackNavigator();
const MainTabs = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<RootStack.Navigator>
<RootStack.Screen name="Main" component={MainTabs} />
<RootStack.Screen name="Details" component={DetailsScreen} />
</RootStack.Navigator>
</NavigationContainer>
);
}
Performance
Key Optimizations
React.memofor pure componentsuseMemo/useCallbackfor expensive computationsFlatListwithgetItemLayoutfor perf- Image caching with
react-native-fast-image - Hermes engine for Android
- Remove console.logs in production
Native Modules
Use Turbo Modules (New Architecture) for bridging:
// NativeModule.ts
import { TurboModuleRegistry } from 'react-native';
export default TurboModuleRegistry.getEnforcing('MyCustomModule');
Cross-Platform Strategy
- Write once, customize per platform with
.ios.tsx/.android.tsxextensions - Use Platform.select for minor differences
- Test on both platforms before every release
Version History
- 38e2523 Current 2026-07-05 19:41
