iT邦幫忙

react-native相關文章
共有 308 則文章
鐵人賽 Modern Web DAY 24

技術 React Native App 實戰 (七) 第一次開啟 APP 介紹頁面

這幾天的實戰當中已經把一些簡單的 App 完成了,完成後當然是要來修飾摟,很多 App 在第一次開啟的時候都會有介紹的頁面,來跟使用者說明這個 App 怎麼使用...

鐵人賽 Modern Web DAY 23

技術 React Native App 實戰 (六) PostDetail - 商品頁面

昨天我們已經把 Home 完成並且點了下面的商品會進入 PostDetail,PostDetail 目前還是使用之前簡單的 Card 擋一下,今天要把他刻漂亮一...

鐵人賽 Modern Web DAY 23

技術 Day 23:實作 OAuth 來使用 Github GraphQL API

前言 前面已經進行了一連串 React Native 跟 GraphQL 的主題教學了,有仔細看下來的讀者應該都對這兩種技術有了一定的瞭解。這系列接下來的部分會...

鐵人賽 Modern Web DAY 22

技術 React Native App 實戰 (五) 首頁 - 實戰 ListView

前兩天的實戰(三)、(四)已經把首頁完成一半了,但是目前首頁的部分還是使用 View 來簡單顯示我們做的 Component,今天要使用 ListView 串接...

鐵人賽 Modern Web DAY 21

技術 React Native App 實戰 (四) 首頁 - 卡片元件

今天我們要來刻一個簡單的卡片 UI,可以簡單的搭配 ScrollView 或是 ListView 就能完成漂亮的首頁了,主要還是用到了 FlexBox 來排版可...

鐵人賽 Modern Web DAY 20

技術 React Native App 實戰 (三) 首頁 - 廣告 Banner

通常一款 電商 App 開起來,最上方會有一個 Banner 輪播漂漂亮亮的圖片來吸引使用者,今天我們就來實作和設計一款簡單好用的 Banner 吧,當然輪播的...

鐵人賽 Modern Web DAY 19

技術 React Native App 實戰 (二) 87% 像 Spotify 登入頁面

昨天有把 boilerplate 架起來了,那我們今天就來刻第一個畫面,我們的目標是要刻一個 EC 的 App 所以當然少不了登入頁面,今天我們就拿 Spoti...

鐵人賽 Modern Web DAY 18

技術 React Native App 實戰 (一) 初始專案

OK 鐵人賽已經過半了,我也已經把 React Native 常用的基礎元件和排版方法教完了,接下來就是要實戰了,我們的標題可是 React Native 航向...

鐵人賽 Modern Web DAY 17

技術 React Native Navigator 進階版 使用 react-native-router-flux

react-native-router-flux 是一款別人開源專門切換 router 的 Component,他是在 React Native Navigat...

鐵人賽 Modern Web DAY 17

技術 Day 17:活用第三方的 React Native Module

前言 在使用 React Native 的此時此刻,我們就已經站在巨人的肩膀上了。不過有時候官方並不一定有提供所有需要的功能,基於我們不該有勇無謀的重造輪子,這...

鐵人賽 Modern Web DAY 16

技術 React Native Navigator 學會切換頁面 (一)

在一個 App 內不可能只有一個頁面,一定會使用到換頁的動作,所以這個時候我們要使用一個元件叫做 Navigator他能幫我們切換到下一個頁面。 Navigat...

鐵人賽 Modern Web DAY 16

技術 Day 16:在 React Native 中運用 Storage

前言 一般情況下,我們建構服務時應該會想把資料儲存在後端的資料庫裡面,不管是 RDBMS 或是各種的 NoSQL,掌握資料的好處不必多說,要建立更有用的功能或是...

鐵人賽 Modern Web DAY 15

技術 React Native 如何使用人家寫好的元件

身為一個小小工程師,最好的朋友莫過於 Google、Stack Overflow、最重要的就是 Github 了,Github 上有滿滿的開源套件,也不乏 Re...

鐵人賽 Modern Web DAY 15

技術 Day 15:Networking 直接就上手

前言 透過網路的連結來發送請求、同步資料不只是網頁前端需要,對行動應用程式來說也是不可或缺。從這邊就可以看出 React Native 的巧思與精神,如何讓學習...

鐵人賽 Modern Web DAY 14

技術 React Native 跨平台設計(二) 方便的 Platform

上次有介紹到,我們可以用 .ios .android 的檔案名稱後輟來分辨我們是使用 android 還是 ios 的 Component,但是除了這個方法法外...

鐵人賽 Modern Web DAY 14

技術 Day 14:編輯的藝術 - TextInput 與 Keyboard

前言 手機不是很好打字,如果可以用更簡單的方式搞定就應該盡量避免打字,但很多時候還是必須要讓使用者輸入,例如:回留言、寫筆記、填表單、搜尋,等等,因此還是必須熟...

鐵人賽 Modern Web DAY 13

技術 Day 13:Navigation Part II:新的 API - NavigationExperimental

前言 Product Pain 是 React Native 聆聽社群聲音的重要平台,而在上面 Navigator 是個知名的「Pain」,也催生了 Navig...

鐵人賽 Modern Web DAY 13

技術 React Native 跨平台設計(一) 使用 .ios .android

React Native 號稱可以寫兩個平台,確實他真的可以一次寫兩個平台,而且效能還不錯,但是官網也有說,只號稱 85% 的程式碼能重複使用,那剩下的 15...

鐵人賽 Modern Web DAY 28

技術 Day 28 / Other -- Android Structure

Android Structure <好讀版> 前言 提完了 iOS 的架構,接下來就要提 Android 的部分囉。設定 Android 時,相比...

鐵人賽 Modern Web DAY 12

技術 Day 12:Navigation Part I:Navigation 簡介與 Navigator

前言 在 React Native 裡面,大多的概念以及 Component 都相當好上手,但 Navigation 是個例外。Routing and Navi...

鐵人賽 Modern Web DAY 12

技術 React Natvie FlexBox 的排版

哇!好不容易打基礎元件介紹完了,接戲來就來介紹 React Native 的排版吧,如果有在關注該系列的朋友,一定有發現我都用了一個 styles.center...

鐵人賽 Modern Web DAY 11

技術 React Native 基礎元件 <TextInput> 簡介

常用的 React Native 的基礎元件基本上都快介紹完了呢,TextInput 是能讓使用者輸入文字的元件,輸入進 App 後,我們會需要把輸入的字串存起...

鐵人賽 Modern Web DAY 11

技術 Day 11:IDE (Integrated Development Environment) for React Native

前言 雖然有了 React Native 這樣方便的開發工具,但試想如果必須同時開著 Xcode、Android Studio 還有 Atom 這樣好像很辛苦,...

鐵人賽 Modern Web DAY 10

技術 Day 10:跨平台策略

本篇目的 首先我們必須認知到我們雖應該盡量的共用程式碼,但不應該完全被綁死,由於 iOS、Android 功能實作上的限制、UI 的慣例都還是有其差異,Face...

鐵人賽 Modern Web DAY 10

技術 React Native 基礎元件 <ListView> 簡介

ListView 是最適合用來顯示重複數據的一種元件,ListView 他不會一次把所有數據顯示出來,而是有在螢幕上的資料他才會顯示出來,所以在效能上會比較好。...

鐵人賽 Modern Web DAY 27

技術 Day 27 / Other -- iOS Structure

iOS Structure &lt;好讀版&gt; ##前言 關於 JS 在 react-native 中的部分,算是都講解完了,接下來這三章,會提到 reac...

鐵人賽 Modern Web DAY 9

技術 React Native 基礎元件 <Button>、<TouchableOpacity> 簡介

Button 在 React Native 其實算是特殊的,0.38 版以前的 React Native 並沒有 Button 這個元件的,都要用 &lt;To...

鐵人賽 Modern Web DAY 9

技術 Day 09:常見的 React Native Component - Part II

本篇目的 使用者主要是透過 Touch 來跟 Mobile App 互動,跟網頁中的 Click 不太一樣。而它又可以結合各種的手勢,長按一個按鈕、滾動 Lis...

鐵人賽 Modern Web DAY 8

技術 React Native 基礎元件 <Image> 簡介

一款 App 裡面沒有圖片就太單調了,所以今天來介紹 React Native 元件裡面如何顯示圖片吧 Image 跟其他元件一樣可以直接使用 import {...

鐵人賽 Modern Web DAY 8

技術 Day 08:常見的 React Native Component - Part I

本篇目的 俗話說「工欲善其事,必先利其器」,React Native 是強大的武器,而熟悉它則是磨亮這個武器。就像學習 HTML 時,必先從基本的 HTML T...