Expo Native UI

遵循 Apple 人机界面指南（Human Interface Guidelines）及现代 React Native 实践，使用 Expo Router 构建具备生产质量的原生移动应用。

安装

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install expo-native-ui

该技能的作用

指导如何基于 Expo Router 实现原生移动应用，涵盖以下方面：

• 基于文件的路由系统，并搭配原生导航栈（navigation stacks）
• 原生标签栏（NativeTabs）与 iOS 26 新特性
• 通过 expo-symbols 集成 SF Symbols
• 模糊效果（expo-blur）与液态玻璃效果（expo-glass-effect）
• Reanimated 动画与手势处理
• 原生控件：Switch、Slider、SegmentedControl、DateTimePicker

适用场景

• 构建全新的 Expo Router 应用
• 添加原生标签页导航
• 实现 iOS 风格的模糊或液态玻璃视觉效果
• 创建具备进入/退出过渡效果的流畅动画
• 集成 SF Symbols 作为图标资源
• 搭建包含分组（groups）和动态路由（dynamic routes）的路由结构

关键词

expo router, react native, native tabs, sf symbols, expo blur, liquid glass, reanimated, ios, android, mobile app, navigation stack, form sheet, modal, context menu, link preview

参考资料

请参考以下文档获取详细实现说明：

核心原则

运行应用

请优先尝试 Expo Go，再考虑构建自定义原生包：

npx expo start  # 使用 Expo Go 扫描二维码启动

仅在以下情况需要执行自定义构建（npx expo run:ios）：

• 本地 Expo 模块（即 modules/ 目录下含自定义原生代码）
• Apple 平台特定目标（如小组件、App Clip，依赖 @bacons/apple-targets）
• Expo Go 不支持的第三方原生模块

代码风格

• 使用短横线命名法（kebab-case）命名文件：例如 comment-card.tsx
• 在 tsconfig 中配置路径别名（path aliases），避免相对路径导入
• 禁止在 app/ 目录中混放组件或工具函数
• 必须确保至少存在一条匹配根路径 "/" 的路由（该路由可位于某个分组内）
• 在字符串中需谨慎转义嵌套的反引号（backticks）

库选型偏好

响应式设计

// 始终将根组件包裹在 ScrollView 中，并启用自动安全区插值

  {children}


// 使用 useWindowDimensions，而非 Dimensions.get()
const { width, height } = useWindowDimensions();

// 优先使用 Flexbox 布局，而非 Dimensions API

导航模式

带预览与上下文菜单的 Link

import { Link } from 'expo-router';


  
    
  
  
  
    
    
  

表单浮层模态框（Form Sheet Modal）

// 在 _layout.tsx 中

原生标签栏结构

app/
  _layout.tsx — 
  (index,search)/
    _layout.tsx — 
    index.tsx
    search.tsx

// app/_layout.tsx
import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";

export default function Layout() {
  return (
    
      
        
        Items
      
      
    
  );
}

样式规范

• 尽可能使用 Flex gap 替代 margin/padding
• borderCurve: 'continuous' 实现连续圆角（非胶囊形）
• 统一使用 boxShadow 样式属性，禁用 React Native 旧版 shadow/elevation
• 页面标题统一使用 Stack title，避免自定义文本元素
• 优先使用内联样式（inline styles），仅在样式复用时才使用 StyleSheet.create
• fontVariant: 'tabular-nums' 用于数字计数器对齐
• 展示可复制数据的 Text 组件必须添加 selectable 属性

// 阴影示例


// 连续圆角示例

行为规范

• 触感反馈（Haptics）：仅在 iOS 上有条件地使用 expo-haptics
• 搜索栏：优先在 Stack.Screen 中配置 headerSearchBarOptions
• 可选中文本：关键数据应添加 selectable 属性
• 大数字格式化：采用 1.4M、38k 等简写形式，而非 1,400,000
• 禁止在非 DOM 组件中使用内置元素（如 img、div）

绝对禁止事项

1. 禁止使用 已废弃模块：Picker、WebView、来自 react-native 的 SafeAreaView、旧版 AsyncStorage、expo-permissions
2. 禁止使用 Dimensions.get() —— 必须使用 useWindowDimensions
3. 禁止在 app/ 目录中混放组件
4. 禁止使用 Platform.OS —— 应使用 process.env.EXPO_OS
5. 禁止使用 旧版阴影样式 —— 必须使用 CSS boxShadow
6. 禁止直接启动自定义构建 —— 务必先尝试 Expo Go
7. 禁止为一次性样式使用 StyleSheet.create
8. 禁止使用 @expo/vector-icons —— 必须使用 expo-symbols