快速上手 Argon React Native5 步在 Expo 中運行你的第一個設(shè)計系統(tǒng) App【免費下載鏈接】argon-react-nativeArgon React Native項目地址: https://gitcode.com/gh_mirrors/ar/argon-react-native想用一套現(xiàn)成的 UI 快速搭建移動應用又不想從零寫按鈕、卡片和導航Argon React Native正是為此而生的免費開源模板。它是一個基于Expo與 React Native 構(gòu)建的設(shè)計系統(tǒng) App內(nèi)置了 200 多種組件變體和 7 個完整示例頁面讓你從原型到成品只差幾步。本文就用 5 個簡單步驟帶你在一小時內(nèi)把它跑起來并開始定制屬于自己的 App。第 1 步獲取 Argon React Native 項目源碼打開終端在你想存放項目的目錄下執(zhí)行g(shù)it clone https://gitcode.com/gh_mirrors/ar/argon-react-native克隆完成后進入項目目錄你會看到清晰的目錄結(jié)構(gòu)。整個模板的核心都在這幾個文件夾里components所有可復用組件按鈕、卡片、輸入框、頭部導航等screensHome、Profile、Register、Onboarding 等 7 個示例頁面constants主題顏色、文章數(shù)據(jù)、圖片資源navigation抽屜導航與頁面堆棧配置App.js應用入口負責加載字體與圖片資源第 2 步安裝依賴最快只需一條命令項目基于 Expo SDK 48需要先確保本機安裝了 Node.js建議 16 以上。然后運行npm install安裝完成后package.json中的核心依賴會就位包括Expo、React Native 0.71、galio-framework 以及 React Navigation 全家桶。依賴裝好后即可進入下一步啟動。第 3 步用 Expo 一鍵啟動開發(fā)服務器在項目根目錄執(zhí)行npm startExpo 開發(fā)服務器啟動后終端會顯示一個二維碼。此時你有三種方式預覽你的設(shè)計系統(tǒng) App掃碼運行手機安裝 Expo Go 應用掃碼即可真機預覽iOS 模擬器按i鍵自動喚起Android 模擬器按a鍵自動喚起如果你想指定平臺也可以直接運行npm run ios或npm run android。第 4 步認識你的第一屏——Onboarding 引導頁啟動后你會先看到 Onboarding 引導頁它展示了大寫的 Design System 字樣和 Get Started 按鈕。它的實現(xiàn)非常簡潔整個頁面只用了幾行代碼就拼裝完成Block flex center ImageBackground source{Images.Onboarding} style{{ height, width }} / /Block Button onPress{() navigation.navigate(App)}Get Started/Button從這里你可以看出 Argon React Native 的設(shè)計哲學用現(xiàn)成組件快速組合頁面而不是重復造輪子。第 5 步定制主題打造你的專屬設(shè)計系統(tǒng) App點進 App 后你會看到一個帶抽屜導航的完整應用包含 Home、Profile、Account、Elements、Articles 五個模塊。接下來就是發(fā)揮創(chuàng)意的時刻了。調(diào)整品牌色打開 constants/Theme.js所有顏色集中定義在argonTheme.COLORS中。想換主色調(diào)只需改一行PRIMARY: #5E72E4, // 改成你的品牌色復用組件按鈕、卡片、輸入框、下拉選擇等全部封裝在 components/index.js 中。以首頁為例screens/Home.js 只是把文章卡片排進 ScrollView就形成了瀑布流效果。修改頁面導航抽屜菜單和頁面跳轉(zhuǎn)邏輯都在 navigation/Screens.js 中新增頁面只需照葫蘆畫瓢添加一個 Stack.Screen。小結(jié)從模板到上線比你想象的更快到這里你的第一個Expo 設(shè)計系統(tǒng) App已經(jīng)成功運行并且掌握了主題與頁面的定制入口。Argon React Native 最大的價值在于開箱即用的組件庫 完整示例頁面 統(tǒng)一主題管理非常適合新手學習 React Native 結(jié)構(gòu)也適合團隊快速產(chǎn)出 MVP。接下來你可以做的進階嘗試修改 constants/articles.js 替換首頁內(nèi)容在 components 中封裝自己的業(yè)務組件利用 screens/Register.js 改造登錄注冊流程祝你開發(fā)愉快 如果這篇文章對你有幫助歡迎收藏轉(zhuǎn)發(fā)給同樣在學 React Native 的朋友?！久赓M下載鏈接】argon-react-nativeArgon React Native項目地址: https://gitcode.com/gh_mirrors/ar/argon-react-native創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考