發表文章

目前顯示的是 7月, 2017的文章

Xamarin.Forms 的一日課程規劃

現在的網路生活建基於行動裝置上。而快速抵達市場是開發 App 的重要需求。 Xamarin.Forms 兼顧跨平台以及利用 Xamarin.iOS 及 Xamarin.Android 累積的資源。可以幫助你快速達成同時推出 iOS App 及 Android App 的目標。 如果想要從 Web 開發領域跨進行動開發領域。Xamarin.Forms 也是一個很好的入門磚。先不要去處理 Apple 及 Google 所規劃的不同路線。直接以 Xamairn.Forms 開發 iOS 及 Android 上的應用程式。 本課程從 iOS 及 Android 開發的基礎開始,一路帶你進入行動開發領域。運用 Xamarin.Forms 的快速開發特性,迴避可能路障。先讓你快速進入行動開發世界。 時間 段落 主題 內容 說明 使用時間 Day 1 Section 1 基本概念 Xamarin.iOS 的執行架構 在使用 Xamarin.Forms 前,應該需要認識 Xamarin.iOS 才能進階使用 Xamarin.Forms 。包括進行部署測試及了解錯誤訊息。 15 min 50 min Xamarin.Android 的執行架構 在使用 Xamarin.Forms 前,應該需要認識 Xamarin.Android 才能進階使用 Xamarin.Forms 。包括進行部署測試及了解錯誤訊息。 15 min Xamarin.Forms 的設計目標與實現 講述 Xamarin.Forms 要達成的目標與相應的技術挑戰 15 min 下課休息 10 min Section 2 UI 設計 Concept 直接講 Flat Design 的概念與設計方法。UX 的注意事項 10 min 50 min Layout Layout 需要掌握的幾組基本概念 10 min 講解並且展示 StackLayout, AbsoluteLayout, Grid 與 RelativeLayout ...

React Native - Navigation

圖片
在前文我們介紹了 React Native 的開發環境,並且以官網的範例跑在虛擬機上。 現在我們來試圖建立一個簡單的 App ,讓我們可以評估 RN 目前的發展程度。 我們在開發 iOS App 時,我們可以藉由 Storyboard 或是 XIB 檔案,建立我們的 Navigation 邏輯以及完成 UI 配置等視覺元素的建置。在 Android 方面,Android Studio 也有一個很漂亮的所見即所得的 UI Designer 。 React Native 作為一個開發中的框架,如果要有一個像是 Android Studio 或是 Visual Studio 所提供的那種等級 UI Designer ,會是一個技術上會不斷重工的辛苦工作。不過 React Native 在這邊透過直接在測試機上進行更新 (Cmd + R) 來解決了需要觀看設計成果以及提供設計工具的需求。所以在我們先使用這樣的方式來觀看我們的設計成果。 然後我們繼續前進來看看以 React Native 進行開發,這樣才能幫助我們評估這項技術與其他跨平台技術進行比較。與評估目前 React Native 的進展。 首先我們來開發一個簡單的系統。目標由雲端站台提供餐廳的位置,電話與說明資訊。 在這個 App 中,我們可以看到 React Native 怎麼處理來自網路的資料,如何加入地圖,如何呼叫系統功能。 以下是這個 App 的概念圖式 然後我們要來解決第一個問題,就是怎麼樣建立這五個 View 然後進行導航。 這次我們先進行 iOS 的部分,然後在下一篇文章中和大家報告 Android 的部分。 在 React Native 這邊要加一個 View 十分容易,直接加個 js 檔就可以。 在命名上,如果iOS 與 Android 最好是命名為 [View 名稱].ios.js 。其中 ios 可換為 android 來描述 Android的View 。當然我們在後面會提到放到一個指定目錄下,讓 iOS 與 Android 可以分享商業邏輯與使用者介面配置。不過我們會在下一篇文章要處理 Android 的 Back Button ,所以現在先寫 iOS 的部分。 iOS 以 ViewController 作為 App 的核心,控制 View ...