OK 鐵人賽已經過半了，我也已經把 React Native 常用的基礎元件和排版方法教完了，接下來就是要實戰了，我們的標題可是 React Native 航向真全端，建構雙平台 App，如果沒有實際建構一個怎麼可以說我們要建構一款雙平台 App 呢？所以接下來時間我會嘗試帶著大家建構一款 EC 的 React Native App，不過只有 App 前端的部分，後台 Api 在這次鐵人賽就不多作介紹摟。

找個好用的 boilerplate、Starter kit

為什麼要找一個好用的 boilerplate、Starter kit呢？官方不是已經有提供方便的 cli 可以建構一個完整的 React Native 專案了嗎？理由很簡單喔，因為官方的是最基礎的專案架構，只有一些陽春 Debug 功能，資料處理的 Redux 部分也沒有，所以直接用別人在維護的 boilerplate 會方便許多，筆者習慣使用的 React Native boilerplate 是這款，react-native-boilerplate，他是 jhen0409 大大維護的專案，雖然星星數不多，但是 jhen0409 大大也是 react-native-debugger 的開發者，所以我想沒有人接的 react-native-debugger 會比他更完整了，這個 boilerplate 當中包含 React Native 最新版、Redux、Remote Redux DevTools、Immutable 等等工具，還有包含測試可以方便我們開發。

使用

git clone https://github.com/jhen0409/react-native-boilerplate.git
npm install
npm start
npm run ios       #開發 ios 等同 react-native run-ios
npm run android   #開發 android 等同 react-native run-android

開啟後的畫面

專案架構

├── LICENSE
├── README.md
├── android                      # android 專案檔
│   ├── app
│   ├── build
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   └── settings.gradle
├── index.android.js             # android 進入點
├── index.ios.js                 # ios 進入點
├── ios                          # xcode 專案檔
│   ├── RNBoilerplate
│   ├── RNBoilerplate.xcodeproj
│   ├── RNBoilerplateTests
│   └── build
├── package.json
├── src                          # React Native 主要邏輯
│   ├── actions                  # Redux Action 放置位置
│   ├── components               # Dump component 放置位置
│   ├── config
│   ├── configureStore.js
│   ├── containers               # Smart component 放置位置，會去使用 Action 的 component
│   ├── index.js                 # src 進入點
│   └── reducers                 # Redux reducer 放置位置
├── test                         # test case
│   ├── actions
│   ├── components
│   ├── reducers
│   └── setup.js
└── yarn.lock

OK 今天先到這樣，明天我們動手來刻第一個 UI 吧!!
如果有關注的朋友，會發現忽然冒出了一個 Redux，這個 Redux 呢是 React 當中用來處理每個 component 資料交互的工具，可以方便我們管理所有資料，未來會在實作中慢慢的介紹使用方法和，大家拭目以待吧

有問題歡迎來 React Native Taiwan 問喔
創科資訊