[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-cde51972-a30c-4dde-8f18-5536586b1416":3,"$f2Zo6Az7EBb-UhpXC01D-BFhHfr3c0-seRauU-JUVp7o":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"cde51972-a30c-4dde-8f18-5536586b1416","building-native-ui","使用Expo Router构建精美应用的完整指南。涵盖基础、样式、组件、导航、动画、模式和原生标签。","cat_life_career","mod_other","sickn33,other","---\nname: building-native-ui\ndescription: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.\nrisk: unknown\nsource: community\nversion: 1.0.1\nlicense: MIT\n---\n\n# Expo UI Guidelines\n\n## When to Use\n- You are building a native-feeling Expo Router application and need guidance on navigation, controls, effects, or platform-specific UI.\n- You need to decide whether Expo Go is sufficient or a custom native build is actually required.\n- The task involves modern Expo UI patterns across animations, tabs, headers, storage, media, or visual effects.\n\n## References\n\nConsult these resources as needed:\n\n```\nreferences\u002F\n  animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures\n  controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker\n  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction. \n  gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)\n  icons.md               SF Symbols via expo-image (sf: source), names, animations, weights\n  media.md               Camera, audio, video, and file saving\n  route-structure.md     Route conventions, dynamic routes, groups, folder organization\n  search.md              Search bar with headers, useSearch hook, filtering patterns\n  storage.md             SQLite, AsyncStorage, SecureStore\n  tabs.md                NativeTabs, migration from JS tabs, iOS 26 features\n  toolbar-and-headers.md Stack headers and toolbar buttons, menus, search (iOS only)\n  visual-effects.md      Blur (expo-blur) and liquid glass (expo-glass-effect)\n  webgpu-three.md        3D graphics, games, GPU visualizations with WebGPU and Three.js\n  zoom-transitions.md    Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+)\n```\n\n## Running the App\n\n**CRITICAL: Always try Expo Go first before creating custom builds.**\n\nMost Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`:\n\n1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go\n2. **Check if features work**: Test your app thoroughly in Expo Go\n3. **Only create custom builds when required** - see below\n\n### When Custom Builds Are Required\n\nYou need `npx expo run:ios\u002Fandroid` or `eas build` ONLY when using:\n\n- **Local Expo modules** (custom native code in `modules\u002F`)\n- **Apple targets** (widgets, app clips, extensions via `@bacons\u002Fapple-targets`)\n- **Third-party native modules** not included in Expo Go\n- **Custom native configuration** that can't be expressed in `app.json`\n\n### When Expo Go Works\n\nExpo Go supports a huge range of features out of the box:\n\n- All `expo-*` packages (camera, location, notifications, etc.)\n- Expo Router navigation\n- Most UI libraries (reanimated, gesture handler, etc.)\n- Push notifications, deep links, and more\n\n**If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode\u002FAndroid Studio setup.\n\n## Code Style\n\n- Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly.\n- Always use import statements at the top of the file.\n- Always use kebab-case for file names, e.g. `comment-card.tsx`\n- Always remove old route files when moving or restructuring navigation\n- Never use special characters in file names\n- Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors.\n\n## Routes\n\nSee `.\u002Freferences\u002Froute-structure.md` for detailed route conventions.\n\n- Routes belong in the `app` directory.\n- Never co-locate components, types, or utilities in the app directory. This is an anti-pattern.\n- Ensure the app always has a route that matches \"\u002F\", it may be inside a group route.\n\n## Library Preferences\n\n- Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage\n- Never use legacy expo-permissions\n- `expo-audio` not `expo-av`\n- `expo-video` not `expo-av`\n- `expo-image` with `source=\"sf:name\"` for SF Symbols, not `expo-symbols` or `@expo\u002Fvector-icons`\n- `react-native-safe-area-context` not react-native SafeAreaView\n- `process.env.EXPO_OS` not `Platform.OS`\n- `React.use` not `React.useContext`\n- `expo-image` Image component instead of intrinsic element `img`\n- `expo-glass-effect` for liquid glass backdrops\n\n## Responsiveness\n\n- Always wrap root component in a scroll view for responsiveness\n- Use `\u003CScrollView contentInsetAdjustmentBehavior=\"automatic\" \u002F>` instead of `\u003CSafeAreaView>` for smarter safe area insets\n- `contentInsetAdjustmentBehavior=\"automatic\"` should be applied to FlatList and SectionList as well\n- Use flexbox instead of Dimensions API\n- ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size\n\n## Behavior\n\n- Use expo-haptics conditionally on iOS to make more delightful experiences\n- Use views with built-in haptics like `\u003CSwitch \u002F>` from React Native and `@react-native-community\u002Fdatetimepicker`\n- When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior=\"automatic\"` set\n- When adding a `ScrollView` to the page it should almost always be the first component inside the route component\n- Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar\n- Use the `\u003CText selectable \u002F>` prop on text containing data that could be copied\n- Consider formatting large numbers like 1.4M or 38k\n- Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component\n\n# Styling\n\nFollow Apple Human Interface Guidelines.\n\n## General Styling Rules\n\n- Prefer flex gap over margin and padding styles\n- Prefer padding over margin where possible\n- Always account for safe area, either with stack headers, tabs, or ScrollView\u002FFlatList `contentInsetAdjustmentBehavior=\"automatic\"`\n- Ensure both top and bottom safe area insets are accounted for\n- Inline styles not StyleSheet.create unless reusing styles is faster\n- Add entering and exiting animations for state changes\n- Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape\n- ALWAYS use a navigation stack title instead of a custom text element on the page\n- When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)\n- CSS and Tailwind are not supported - use inline styles\n\n## Text Styling\n\n- Add the `selectable` prop to every `\u003CText\u002F>` element displaying important data or error messages\n- Counters should use `{ fontVariant: 'tabular-nums' }` for alignment\n\n## Shadows\n\nUse CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles.\n\n```tsx\n\u003CView style={{ boxShadow: \"0 1px 2px rgba(0, 0, 0, 0.05)\" }} \u002F>\n```\n\n'inset' shadows are supported.\n\n# Navigation\n\n## Link\n\nUse `\u003CLink href=\"\u002Fpath\" \u002F>` from 'expo-router' for navigation between routes.\n\n```tsx\nimport { Link } from 'expo-router';\n\n\u002F\u002F Basic link\n\u003CLink href=\"\u002Fpath\" \u002F>\n\n\u002F\u002F Wrapping custom components\n\u003CLink href=\"\u002Fpath\" asChild>\n  \u003CPressable>...\u003C\u002FPressable>\n\u003C\u002FLink>\n```\n\nWhenever possible, include a `\u003CLink.Preview>` to follow iOS conventions. Add context menus and previews frequently to enhance navigation.\n\n## Stack\n\n- ALWAYS use `_layout.tsx` files to define stacks\n- Use Stack from 'expo-router\u002Fstack' for native navigation stacks\n\n### Page Title\n\nSet the page title in Stack.Screen options:\n\n```tsx\n\u003CStack.Screen options={{ title: \"Home\" }} \u002F>\n```\n\n## Context Menus\n\nAdd long press context menus to Link components:\n\n```tsx\nimport { Link } from \"expo-router\";\n\n\u003CLink href=\"\u002Fsettings\" asChild>\n  \u003CLink.Trigger>\n    \u003CPressable>\n      \u003CCard \u002F>\n    \u003C\u002FPressable>\n  \u003C\u002FLink.Trigger>\n  \u003CLink.Menu>\n    \u003CLink.MenuAction\n      title=\"Share\"\n      icon=\"square.and.arrow.up\"\n      onPress={handleSharePress}\n    \u002F>\n    \u003CLink.MenuAction\n      title=\"Block\"\n      icon=\"nosign\"\n      destructive\n      onPress={handleBlockPress}\n    \u002F>\n    \u003CLink.Menu title=\"More\" icon=\"ellipsis\">\n      \u003CLink.MenuAction title=\"Copy\" icon=\"doc.on.doc\" onPress={() => {}} \u002F>\n      \u003CLink.MenuAction\n        title=\"Delete\"\n        icon=\"trash\"\n        destructive\n        onPress={() => {}}\n      \u002F>\n    \u003C\u002FLink.Menu>\n  \u003C\u002FLink.Menu>\n\u003C\u002FLink>;\n```\n\n## Link Previews\n\nUse link previews frequently to enhance navigation:\n\n```tsx\n\u003CLink href=\"\u002Fsettings\">\n  \u003CLink.Trigger>\n    \u003CPressable>\n      \u003CCard \u002F>\n    \u003C\u002FPressable>\n  \u003C\u002FLink.Trigger>\n  \u003CLink.Preview \u002F>\n\u003C\u002FLink>\n```\n\nLink preview can be used with context menus.\n\n## Modal\n\nPresent a screen as a modal:\n\n```tsx\n\u003CStack.Screen name=\"modal\" options={{ presentation: \"modal\" }} \u002F>\n```\n\nPrefer this to building a custom modal component.\n\n## Sheet\n\nPresent a screen as a dynamic form sheet:\n\n```tsx\n\u003CStack.Screen\n  name=\"sheet\"\n  options={{\n    presentation: \"formSheet\",\n    sheetGrabberVisible: true,\n    sheetAllowedDetents: [0.5, 1.0],\n    contentStyle: { backgroundColor: \"transparent\" },\n  }}\n\u002F>\n```\n\n- Using `contentStyle: { backgroundColor: \"transparent\" }` makes the background liquid glass on iOS 26+.\n\n## Common route structure\n\nA standard app layout with tabs and stacks inside each tab:\n\n```\napp\u002F\n  _layout.tsx — \u003CNativeTabs \u002F>\n  (index,search)\u002F\n    _layout.tsx — \u003CStack \u002F>\n    index.tsx — Main list\n    search.tsx — Search view\n```\n\n```tsx\n\u002F\u002F app\u002F_layout.tsx\nimport { NativeTabs, Icon, Label } from \"expo-router\u002Funstable-native-tabs\";\nimport { Theme } from \"..\u002Fcomponents\u002Ftheme\";\n\nexport default function Layout() {\n  return (\n    \u003CTheme>\n      \u003CNativeTabs>\n        \u003CNativeTabs.Trigger name=\"(index)\">\n          \u003CIcon sf=\"list.dash\" \u002F>\n          \u003CLabel>Items\u003C\u002FLabel>\n        \u003C\u002FNativeTabs.Trigger>\n        \u003CNativeTabs.Trigger name=\"(search)\" role=\"search\" \u002F>\n      \u003C\u002FNativeTabs>\n    \u003C\u002FTheme>\n  );\n}\n```\n\nCreate a shared group route so both tabs can push common screens:\n\n```tsx\n\u002F\u002F app\u002F(index,search)\u002F_layout.tsx\nimport { Stack } from \"expo-router\u002Fstack\";\nimport { PlatformColor } from \"react-native\";\n\nexport default function Layout({ segment }) {\n  const screen = segment.match(\u002F\\((.*)\\)\u002F)?.[1]!;\n  const titles: Record\u003Cstring, string> = { index: \"Items\", search: \"Search\" };\n\n  return (\n    \u003CStack\n      screenOptions={{\n        headerTransparent: true,\n        headerShadowVisible: false,\n        headerLargeTitleShadowVisible: false,\n        headerLargeStyle: { backgroundColor: \"transparent\" },\n        headerTitleStyle: { color: PlatformColor(\"label\") },\n        headerLargeTitle: true,\n        headerBlurEffect: \"none\",\n        headerBackButtonDisplayMode: \"minimal\",\n      }}\n    >\n      \u003CStack.Screen name={screen} options={{ title: titles[screen] }} \u002F>\n      \u003CStack.Screen name=\"i\u002F[id]\" options={{ headerLargeTitle: false }} \u002F>\n    \u003C\u002FStack>\n  );\n}\n```\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,77,203,"2026-05-16 13:09:29",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"6610dc08-4d67-4f8f-900b-41eb4cc09629","1.0.0","building-native-ui.zip",4681,"uploads\u002Fskills\u002Fcde51972-a30c-4dde-8f18-5536586b1416\u002Fbuilding-native-ui.zip","82a3cf1113055745ba5cd4e75ea232a76e26a222e63ef41e2379974bccb3ce9d","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":11157}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]