Agent Skills
› cosmicstack-labs/mercury-agent-skills
› react-native-patterns
react-native-patterns
GitHub提供React Native高性能跨平台应用开发指南，涵盖架构设计、React Navigation导航模式、性能优化策略（如Hermes、FlatList）、Turbo Modules原生模块集成及多端适配方案。
Trigger Scenarios
构建React Native应用
优化RN性能
配置导航结构
开发原生模块
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
