菜单
Build production React Native apps with Expo SDK 53+, Expo Router (file-based navigation), New Architecture (Fabric + TurboModules), FlashList, Reanimated 4, Zustand for state, Hermes, EAS Build, and App Store/Play Store deployment.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/EliasOulkadi/shokunin --skill react-native命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
'Generate PDFs, resumes, CVs, letters, slide decks, portfolios, one-pagers, white papers, and professional documents. Use when user asks to create a PDF, make a resume, write a letter, design slides, format a document, typeset a report, build a portfolio, make a presentation, or create a one-pager. Warm parchment, ink-blue accent, serif-led hierarchy. CN uses TsangerJinKai02, EN uses Charter, JA uses YuMincho (best-effort). Triggers on Chinese: "做 PDF / 排版 / 一页纸 / 白皮书 / 作品集 / 简历 / PPT / slides". Do NOT use for code formatting, data charts, or wireframes.'
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
Run 150+ AI apps via inference.sh CLI - image generation, video creation, LLMs, search, 3D, Twitter automation. Models: FLUX, Veo, Gemini, Grok, Claude, Seedance, OmniHuman, Tavily, Exa, OpenRouter, and many more. Use when running AI apps, generating images/videos, calling LLMs, web search, or automating Twitter. Triggers: inference.sh, infsh, ai model, run ai, serverless ai, ai api, flux, veo, claude api, image generation, video generation, openrouter, tavily, exa search, twitter api, grok
基于 SOC 职业分类
正在显示 SKILL.md
| name | react-native |
| description | Build production React Native apps with Expo SDK 53+, Expo Router (file-based navigation), New Architecture (Fabric + TurboModules), FlashList, Reanimated 4, Zustand for state, Hermes, EAS Build, and App Store/Play Store deployment. |
| triggers | ["create a React Native app","set up navigation","optimize list performance","handle deep links","configure push notifications","deploy to stores","Expo Router","FlashList","Reanimated","Zustand","React Navigation","EAS Build","react native","expo","mobile app","iOS","Android","react-navigation","expo router","native module"] |
| negatives | ["Flutter","web-only React","PWA","mobile web","Ionic","Cordova","Capacitor","Xamarin"] |
| license | MIT |
| compatibility | opencode |
| metadata | {"workflow":"mobile","audience":"developers","version":"3.0"} |
| allowed-tools | ["bash","edit","glob","grep","read","write","websearch","webfetch"] |
Build production React Native apps with Expo, New Architecture, and modern navigation.
npx create-expo-app@latest MyApp --template blank-typescript, configure SDK 53+estimatedItemSize. Optimize renderItem with React.memouseSharedValue + useAnimatedStyle instead of Animated APIexpo-image with cached, resized variants. Never bare <Image> without dimensionsexpo-notifications for push. Handle foreground, background, tap-to-navigatereact-native-screens, InteractionManager.runAfterInteractions for heavy opseas build --platform all --profile production, eas submit, configure CI/CD with GitHub Actions| Scenario | Recommended |
|---|---|
| Greenfield Expo app | Expo Router (file-based, typed routes, deep links) |
| Bare React Native | React Navigation v7 (imperative, full control) |
| Brownfield / native modules | React Navigation v7 |
| Web + mobile | Expo Router (SSR, SEO) |
app/
├ _layout.tsx # Root layout (tabs, stack)
├ index.tsx # /
├ (tabs)/
│ ├ _layout.tsx # Tab config
│ ├ feed.tsx # /feed
│ └ profile.tsx # /profile
├ product/
│ ├ [id].tsx # /product/:id
│ └ review.tsx # /product/:id/review
└ auth/
├ login.tsx # /auth/login
└ signup.tsx # /auth/signup
Deep links work automatically. Universal links with app.json scheme config.
// app/product/[id].tsx
import { useLocalSearchParams } from 'expo-router'
export default function ProductScreen() {
const { id } = useLocalSearchParams<{ id: string }>()
// id is typed as string
}
type RootStackParamList = {
Home: undefined
ProductDetail: { id: string }
Cart: undefined
}
const Stack = createNativeStackNavigator<RootStackParamList>()
export function RootNavigator() {
return (
<NavigationContainer
linking={{
prefixes: ['myapp://', 'https://myapp.com'],
config: {
screens: {
Home: '',
ProductDetail: 'product/:id',
Cart: 'cart',
},
},
}}>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
<Stack.Screen name="Cart" component={CartScreen} />
</Stack.Navigator>
</NavigationContainer>
)
}
| Scenario | Recommended |
|---|---|
| Simple, small app | React Context + useState |
| Medium app | Zustand (minimal boilerplate, hooks-based) |
| Large app, complex state | Redux Toolkit (mature ecosystem, DevTools) |
| Server state | TanStack Query (caching, refetch, pagination) |
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import AsyncStorage from '@react-native-async-storage/async-storage'
interface CartStore {
items: CartItem[]
total: number
addItem: (item: Product) => void
removeItem: (id: string) => void
clear: () => void
}
export const useCartStore = create<CartStore>()(
persist(
(set, get) => ({
items: [],
total: 0,
addItem: (product) => set((state) => ({
items: [...state.items, { ...product, quantity: 1 }],
total: state.total + product.price,
})),
removeItem: (id) => set((state) => ({
items: state.items.filter((i) => i.id !== id),
total: state.items.filter((i) => i.id !== id).reduce((s, i) => s + i.price, 0),
})),
clear: () => set({ items: [], total: 0 }),
}),
{ name: 'cart-storage', storage: createJSONStorage(() => AsyncStorage) }
)
)
| Rule | Implementation |
|---|---|
| Enable Hermes | hermes: true in metro.config.js |
| Use FlashList (Shopify) | Replaces FlatList — built-in recycling, better perf |
| InteractionManager | InteractionManager.runAfterInteractions(() => fetchData()) |
| Memoize components | React.memo on screen components, list items |
| Lazy load tab screens | lazy: true (default in Expo Router) |
| Image optimization | expo-image with cached, resized images |
| Avoid inline functions in render | Extract handlers, use useCallback |
| Freeze inactive screens | react-native-screens detaches from native hierarchy |
import { FlashList } from '@shopify/flash-list'
<FlashList
data={items}
renderItem={renderItem}
keyExtractor={(item) => item.id}
estimatedItemSize={120}
/>
Enabled by default in Expo SDK 53+.
| Component | Old | New |
|---|---|---|
| Native modules | NativeModules proxy | TurboModules (typed, synchronous) |
| View manager | Fabric not used | Fabric (synchronous rendering) |
| State updates | Bridge (async serialization) | JSI (synchronous, no serialization) |
Ensure compatibility:
// app.json
{
"expo": {
"platforms": ["ios", "android"]
}
}
import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated'
export function AnimatedCard() {
const scale = useSharedValue(1)
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: scale.value }],
}))
return (
<Animated.View
style={animatedStyle}
onTouchStart={() => { scale.value = withSpring(0.95) }}
onTouchEnd={() => { scale.value = withSpring(1) }}
/>
)
}
{
"expo": {
"scheme": "myapp",
"plugins": [["expo-linking"]]
}
}
Always implement a fallback for malformed links.
import * as Notifications from 'expo-notifications'
const { status } = await Notifications.requestPermissionsAsync()
if (status !== 'granted') return
const token = await Notifications.getExpoPushTokenAsync()
Notifications.addNotificationResponseReceivedListener((response) => {
const { screen, params } = response.notification.request.content.data
router.push({ pathname: screen as any, params: params as any })
})
eas build --platform all --profile production
eas submit --platform ios
eas submit --platform android
| Scenario | Cause | Fix |
|---|---|---|
| White screen on launch | Unhandled JS exception | Wrap root with ErrorBoundary, add Sentry |
| Deep link opens wrong screen | Missing or incorrect route config | Verify app.json scheme + linking config match |
| Push notification tap does nothing | No notification response listener | Register addNotificationResponseReceivedListener |
| FlashList blank / slow | Missing estimatedItemSize | Measure or estimate item height, pass to prop |
| Hermes crash on third-party lib | Lib not Hermes-compatible | Check lib docs, use Hermes-compatible version |
| EAS build fails on iOS | Missing provisioning profile | Run eas credentials, eas device:create |
| AsyncStorage 64KB limit on Android | Storage exceeds limit | Migrate to MMKV (react-native-mmkv) |
| Reanimated 4 worklet error | Using non-worklet code inside useAnimatedStyle | Only use Reanimated compatible functions inside worklets |
| TurboModule returns undefined | Fabric/TM not enabled | Verify newArchEnabled: true in app.json |
| Navigation state lost on restart | No persistence | Use persistNavigationState from expo-router or React Navigation v7 storage |
expo-image with resizeReact.memo on list items and screensInteractionManager.runAfterInteractions for heavy operationsexpo-constants env segregation (dev / staging / prod)| Anti-pattern | Fix |
|---|---|
| ScrollView for long lists | FlashList with virtualization |
| No Hermes | Enable Hermes — 2x startup improvement |
| Inline arrow functions in render | useCallback or extract to component |
| FlatList without optimization | Use FlashList instead |
| Deep linking as afterthought | Configure at project start |
| No error boundary | Unhandled JS error = white screen |
navigation.getParent() chains | Restructure to flat navigation hierarchy |
setState in navigation handlers | Navigate first, fetch on screen mount |
Using bare <Image> without dimensions | expo-image with explicit width/height |
| Zustand store split across 10 files | Keep logically cohesive, use slices pattern |
| New Architecture disabled by default | Enable newArchEnabled: true in app.json |
| Manual MethodChannel for native | Use Expo Modules API (typed, modern) |
| Ignoring platform-specific safe areas | useSafeAreaInsets from react-native-safe-area-context |
console.log in production builds | Strip via babel plugin (transform-remove-console) |