Sponsored by Designkit Free Background Remover - Designkit 每天提供最多 100 張圖片的免費 AI 去背服務，並支援批次處理、自訂背景和調整圖片尺寸。

AI 廣告資料庫

Openclaw Skills

React Native & Expo 開發

適用於 Openclaw 的 React Native & Expo 開發

一套利用 React Native 與 Expo 生態系統開發高效能行動應用程式的綜合框架。

daidai8910g

v1.0.0

Apr 1, 2026

安裝

基本資訊

Skill.md

安裝與下載

1. ClawHub CLI

從來源直接安裝技能的最快方式。


                  npx clawhub@latest install minimax-react-native-dev

2. 手動安裝

將技能資料夾複製到以下位置之一

全域模式

~/.openclaw/skills/

工作區

<project>/skills/

優先級：工作區 > 本地 > 內建

3. 提示詞安裝

將此提示詞複製到 OpenClaw 即可自動安裝。


                  請幫我使用 Clawhub 安裝 minimax-react-native-dev。如果尚未安裝 Clawhub，請先安裝（npm i -g clawhub）。

想要直接下載？

取得包含原生技能檔案的ZIP壓縮檔。

什麼是 React Native & Expo 開發？

這份 Openclaw Skills 指南提供了一種以生產為優先的行動開發方法。內容涵蓋了建置跨平台應用程式的完整生命週期，從使用 Expo Router 進行初始專案架構，到進階效能調校與部署。透過使用這些 Openclaw Skills，開發人員可以輕鬆實現複雜功能，例如共享值動畫、使用 React Query 進行高效資料獲取以及原生模組整合。

重點在於使用現代化、高效能的替代方案取代舊有元件，確保使用此技能開發的應用程式保持流暢、反應靈敏且易於維護。它透過整合 Reanimated 3、FlashList 與 EAS 等業界標準工具，彌補了基礎 UI 開發與專業行動工程之間的差距。

React Native & Expo 開發應用場景

建立適用於 iOS 與 Android 的高效能跨平台行動應用程式。
實現流暢的 60FPS 動畫與基於手勢的互動。
使用基於檔案的路由架構可擴展的導覽結構。
優化大規模資料列表以防止捲動卡頓與記憶體洩漏。
管理複雜的應用程式狀態與離線資料同步。

React Native & Expo 開發運作原理

使用 Expo TypeScript 樣板初始化專案，建立型別安全的基礎。
設定基於檔案的路由與佈局，以管理應用程式流程與深層連結。
整合優化的 UI 元件，例如用於高效渲染的 FlashList 與用於進階快取的 expo-image。
使用 Zustand 與 React Query 等工具應用全域狀態管理與網路邏輯。
透過統一的 hooks 實現原生裝置功能，如相機存取、觸覺回饋與生物辨識。
執行效能剖析以識別並解決佈局抖動或包體大小問題。
使用 EAS Build 與 Submit 工作流程將應用程式部署到 App Store 與 Play Store。

React Native & Expo 開發設定指南

若要開始為您的行動專案使用這些 Openclaw Skills，請執行下列指令：

# Create a new Expo project
npx create-expo-app@latest my-app --template blank-typescript
cd my-app

# Install core navigation and UI dependencies
npx expo install expo-router react-native-safe-area-context react-native-screens

# Add performance and animation libraries
npx expo install expo-image react-native-reanimated react-native-gesture-handler

請確保您的 package.json 主要入口設定為 expo-router/entry 以啟用基於檔案的路由。

React Native & Expo 開發資料結構與分類體系

此技能遵循模組化專案結構，以在 Openclaw Skills 內保持清晰的職責分離。

資料夾	職責
`app/`	包含所有路由、佈局與導覽邏輯。
`components/ui/`	存放可重複使用的原子化 UI 元素與樣式。
`stores/`	使用 Zustand 或 Jotai 原子管理全域狀態。
`services/`	處理 API 定義、fetch 封裝器與 webhooks。
`references/`	儲存特定模組（如動畫與測試）的相關文件。