這幾天的實戰當中已經把一些簡單的 App 完成了,完成後當然是要來修飾摟,很多 App 在第一次開啟的時候都會有介紹的頁面,來跟使用者說明這個 App 怎麼使用...
昨天我們已經把 Home 完成並且點了下面的商品會進入 PostDetail,PostDetail 目前還是使用之前簡單的 Card 擋一下,今天要把他刻漂亮一...
前言 前面已經進行了一連串 React Native 跟 GraphQL 的主題教學了,有仔細看下來的讀者應該都對這兩種技術有了一定的瞭解。這系列接下來的部分會...
前兩天的實戰(三)、(四)已經把首頁完成一半了,但是目前首頁的部分還是使用 View 來簡單顯示我們做的 Component,今天要使用 ListView 串接...
今天我們要來刻一個簡單的卡片 UI,可以簡單的搭配 ScrollView 或是 ListView 就能完成漂亮的首頁了,主要還是用到了 FlexBox 來排版可...
通常一款 電商 App 開起來,最上方會有一個 Banner 輪播漂漂亮亮的圖片來吸引使用者,今天我們就來實作和設計一款簡單好用的 Banner 吧,當然輪播的...
昨天有把 boilerplate 架起來了,那我們今天就來刻第一個畫面,我們的目標是要刻一個 EC 的 App 所以當然少不了登入頁面,今天我們就拿 Spoti...
OK 鐵人賽已經過半了,我也已經把 React Native 常用的基礎元件和排版方法教完了,接下來就是要實戰了,我們的標題可是 React Native 航向...
react-native-router-flux 是一款別人開源專門切換 router 的 Component,他是在 React Native Navigat...
前言 在使用 React Native 的此時此刻,我們就已經站在巨人的肩膀上了。不過有時候官方並不一定有提供所有需要的功能,基於我們不該有勇無謀的重造輪子,這...
在一個 App 內不可能只有一個頁面,一定會使用到換頁的動作,所以這個時候我們要使用一個元件叫做 Navigator他能幫我們切換到下一個頁面。 Navigat...
前言 一般情況下,我們建構服務時應該會想把資料儲存在後端的資料庫裡面,不管是 RDBMS 或是各種的 NoSQL,掌握資料的好處不必多說,要建立更有用的功能或是...
身為一個小小工程師,最好的朋友莫過於 Google、Stack Overflow、最重要的就是 Github 了,Github 上有滿滿的開源套件,也不乏 Re...
前言 透過網路的連結來發送請求、同步資料不只是網頁前端需要,對行動應用程式來說也是不可或缺。從這邊就可以看出 React Native 的巧思與精神,如何讓學習...
上次有介紹到,我們可以用 .ios .android 的檔案名稱後輟來分辨我們是使用 android 還是 ios 的 Component,但是除了這個方法法外...
前言 手機不是很好打字,如果可以用更簡單的方式搞定就應該盡量避免打字,但很多時候還是必須要讓使用者輸入,例如:回留言、寫筆記、填表單、搜尋,等等,因此還是必須熟...
前言 Product Pain 是 React Native 聆聽社群聲音的重要平台,而在上面 Navigator 是個知名的「Pain」,也催生了 Navig...
React Native 號稱可以寫兩個平台,確實他真的可以一次寫兩個平台,而且效能還不錯,但是官網也有說,只號稱 85% 的程式碼能重複使用,那剩下的 15...
Android Structure <好讀版> 前言 提完了 iOS 的架構,接下來就要提 Android 的部分囉。設定 Android 時,相比...
前言 在 React Native 裡面,大多的概念以及 Component 都相當好上手,但 Navigation 是個例外。Routing and Navi...
哇!好不容易打基礎元件介紹完了,接戲來就來介紹 React Native 的排版吧,如果有在關注該系列的朋友,一定有發現我都用了一個 styles.center...
常用的 React Native 的基礎元件基本上都快介紹完了呢,TextInput 是能讓使用者輸入文字的元件,輸入進 App 後,我們會需要把輸入的字串存起...
前言 雖然有了 React Native 這樣方便的開發工具,但試想如果必須同時開著 Xcode、Android Studio 還有 Atom 這樣好像很辛苦,...
本篇目的 首先我們必須認知到我們雖應該盡量的共用程式碼,但不應該完全被綁死,由於 iOS、Android 功能實作上的限制、UI 的慣例都還是有其差異,Face...
ListView 是最適合用來顯示重複數據的一種元件,ListView 他不會一次把所有數據顯示出來,而是有在螢幕上的資料他才會顯示出來,所以在效能上會比較好。...
iOS Structure <好讀版> ##前言 關於 JS 在 react-native 中的部分,算是都講解完了,接下來這三章,會提到 reac...
Button 在 React Native 其實算是特殊的,0.38 版以前的 React Native 並沒有 Button 這個元件的,都要用 <To...
本篇目的 使用者主要是透過 Touch 來跟 Mobile App 互動,跟網頁中的 Click 不太一樣。而它又可以結合各種的手勢,長按一個按鈕、滾動 Lis...
一款 App 裡面沒有圖片就太單調了,所以今天來介紹 React Native 元件裡面如何顯示圖片吧 Image 跟其他元件一樣可以直接使用 import {...
本篇目的 俗話說「工欲善其事,必先利其器」,React Native 是強大的武器,而熟悉它則是磨亮這個武器。就像學習 HTML 時,必先從基本的 HTML T...