Agent Skills
› cosmicstack-labs/mercury-agent-skills
› react-native-patterns
react-native-patterns
GitHub提供 React Native 跨平台移动应用开发的最佳实践，涵盖项目架构、React Navigation 导航模式、性能优化策略及原生模块集成，助力构建高性能应用。
触发场景
React Native 项目初始化
需要优化移动端性能
配置多平台导航逻辑
安装
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
版本历史
- 38e2523 当前 2026-07-05 19:41
