ReactNative開發入門教學(5)-Navigation實現多頁，畫面跳轉，翻頁

通常APP不可能永遠都停留在同一個畫面所以通常需要有下一頁然後返回的功能。

在ReactNative中也提供相關的 Navigation套件可以使用。安裝方法與

詳細功能可以看官網的說明 https://facebook.github.io/react-native/docs/navigation.html

這個套件主要分成幾種功能，一種是TabNavigator(類似書籤般的換頁)，StackNavigator(堆疊換頁)

以及DrawerNavigator(滑動選單，功能是點一個按鈕之後可以從右邊或左邊滑出一個選單或是頁面)

有了以上這三種功能，我想應該可以滿足大部分功能型APP的要求，當然如果是拿來開發遊戲或是

複雜一點的或許還是學寫 swift或是 JAVA 來的好一點。

ReactNative開發入門教學(4)-利用AsyncStorage保存登入資料

很多軟體都會有登入一次之後，接下來進入軟體都不需要再打帳號密碼的功能。

這個我很好奇是怎麼做的，上網爬文也大多是別人寫好的套件。也不知其所然。

後來爬到了一個ReactNative組件叫做 AsyncStorage 。是可以將資料存放在手機

的某個部分，我們再利用KEY去把它取出來。所以我決定利用這個方法來寫看看。

先來寫個簡單的表格吧!

ReactNative開發入門教學(3)-與伺服器溝通（Fetch）

如果我們今天要從伺服器上取得資料的話，我們知道 javascript 有提供 ajax 的寫法，

不過，在 ReactNative 中我們大可不必寫 ajax ，我們可以用 fetch() 來連上我們的伺服器

並取得資料! fetch() 的用法可以參考官網 https://facebook.github.io/react-native/docs/network.html

試試看吧!我想沿用上次的代碼，然後我再伺服器上用PHP架好了一個API，被呼叫後回傳個JSON

內容是「{“Message”:”Clicked!”}」。這樣的話我們先照著官網的方式寫個 fetch() 吧!

ReactNative開發入門教學(2)-觸發事件

學會寫 HelloWorld 之後，就可以來寫個簡單的APP了!

如果我們把全部的程式碼都集中在index.ios.js當中的話，會有點亂吧?

所以我看了別人寫的方法，通常都是另外放在別的地方再import進來!

所以我依樣畫葫蘆，把需要的import進來就可以了!

import React, { Component } from 'react';
import {
    AppRegistry
} from 'react-native';
import App from './src/app';

AppRegistry.registerComponent('oeapp', () => App);

React.js開發入門教學(10)-動畫特效

在原本我們使用的CSS特效，在React上被整合的更好使用了。為什麼這麼說？因為我們知道

原本的寫法都是針對某個class或是id、name等等去做觸發事件或是變換的特效。也就是會

要針對某個標籤塞一堆class進去。在React中我們可以利用addon的CSSTransitionGroup

來幫我們做這件事情，也就是說不需要我們自己寫一堆class名稱就可以辦到！首先我們先把原

React.js開發入門教學(9)-分解與組合

其實我們不難發現在寫React很像在寫物件導向語言的感覺。感覺很像在寫物件然後再把物件

放到某個地方執行。那如果是這樣，一個東西本身可以由多個物件組合而成嗎？答案是可以的

一個 Component 可以是由多個 Component 組合而成。我在書上看到一個很好的例子可以

來示範這個。就是用 table ！因為HTML5中所規範的 table 有表頭、內容與表尾。那我

們就利用這樣的結構來實做看看。首先先做個完全靜態的表格！

React.js開發入門教學(8)-傻人版表單

我們學到這邊應該可以利用所學到的東西完整地做出一張可以互動的表單了！其實在React.js有其他

做表單的方式，但是那個我們後來在學，我們還是先用自己會地做出一張土炮表單來測試看看吧:P

這中間我們用到之前所學到的取得輸入值與Checkbox的應用，再加上簡單的驗證來做出這張傻人版

的表單，程式碼如下

React.js開發入門教學(6)-ES6寫法與屬性

前面先閑話家常一下~今天幫別家公司的系統追加密碼強化的功能時，發現點忘記密碼後會發一封有附有HASH的URL到我的信箱

讓我直接連過去改密碼。看了一下代碼，發現一件很逗的事情就是他們為了後續作業的方便，在一進到那個畫面之後，就利用網

址上的HASH算出使用者的帳號，然後把使用者做自動登入後把訊息都放在Session中…我就想，這樣我根本不用改密碼了吧

我直接不改密碼，馬上輸入後台首頁網址，果不其所然直接登入成功XD。這時候在自己去編輯自己的密碼就好了（茶

也就是說今天如果我知道某人的信箱密碼，那我就可以靠這招進到他的帳號裡了XD，但前提是你要先駭到的信箱密碼！

好了，講完，繼續來學習 React.js 吧～今天看了書發現我的寫法與別人不太一樣，才知道原來早就有ES6的寫法，我學的