React Native 學習手冊 讀書筆記之第三章

註: 書本資訊: 歐萊禮 React Native  學習手冊 - 使用 JavaScript 打造原生 App.
Bonnie Eisenman 著 / 楊尊一 譯

以下文章常會見到 RN 字樣,我用來代表 React Native。

照著官方網站安裝 RN 的開發環境,假如你是利用 homebrew 你可能會走以下流程: (我只大概 brief 一下而已,請以官方文件為主。)

你也可以參考我的另外一篇文章 http://winwu.github.io/react-native-note/2016/04/25/native-02/,撰寫於 2016/4, 如果你看這篇文章已經離這個日子有點久了,那就不要看了 XD 因為我並沒有把握 RN 多久更新一次安裝的方法之類的...。


brew install node
brew install watchman
brew install flow

//optional start (可執行可不執行,看你自己)
brew update
brew upgrade
//optional end


// 安裝 recat native 的 commandLine 指令工具
npm install  -g react-native-cli

// 接下開始依照你要開發的平台安裝不同開發環境
// ios 相依或是 android 相依

總體來說,如果你是 mac 電腦, ios 的環境較簡單,android 比較複雜,倘若你也尚未接觸過一些 app 開發的 know how 的話,環境也許會耗掉你蠻多時間的 (<- 苦逼過來人 Orz)。
  • React Native 套件會用到 node 跟 watchman,如果這兩個套件有帶給你什麼麻煩,請你重新更新這些 package 的相依性試試看。
  • flow 是 Facebook 檢查型別的函式庫。

利用 React Native Cli 建立新的應用程式

這是一個會需要等一下的指令...
react-native init FirstProj

這是目錄:
.
├── android
├── index.android.js
├── index.ios.js
├── ios
├── node_modules
└── package.json


index.ios.js, index.android.js 是程式的進入點。


探索範例程式
  • ios 專案可用 xcode 開啟,有支  AppDelegate.m 的檔案可以詳讀。
  • 看到 RTC 開頭的類別,即代表 React Native 的類別。
  • jsCodeLocation 則是未來要部署到實體裝飾可能會修改的設定。(詳細在註解看得到)
  • 有個 moduleName (例: moduleName:@"FirstProj") 的設定在未來也有機會改到他。
  • moduleName 會對應到一個同名的 React 元件,開啟 index.ios.js 會看到一個登記頂層 component 的設定:
     
    AppRegistry.registerComponent('FirstProj', () => FirstProj);
意思是暴露 FirstProj 讓 AppDelegate 可以使用它。其實你也不太會去修改這項設定。

而 Android 則要看 MainActivity.java (如果你有 android studio 可以開來看一下)。登記進入點的地方為 `mReactRootView.startReactApplication(mReactInstanceManager, "FirstProj", null)`。

RN 的 Import
// index.ios.js
  7 import React, { Component } from 'react';
  8 import {
  9   AppRegistry,
 10   StyleSheet,
 11   Text,
 12   View
 13 } from 'react-native';



  • RN 要求你必須明確的 import 每個你會用到的組件,最常用的為 StyleSheet, Text, View 等等。
  • RN 沒有 <div> 這種標籤,通常我們會用 <View>, <Text> 類似於 <div>, <span>。


這章節有個實作小練習,貼心提醒:
  1. 使用 http://openweathermap.org/ 的 API 請先註冊,註冊後請找到你的 APP ID,這很重要,以防你跟著範例卻要不到資料 (一般來說你會拿到 401 的錯誤碼),因為你 fetch 發出去的 api 沒有權限。 
  2. 拿到 APP ID 後把 APPID 的參數加到 fetch 的 url 後綴,如: http://api.openweathermap.org/data/2.5/ .....&APPID=YOURAPPID



有個地方教你如何加入圖片檔案,但如果新的 xcode,位置在此:
(不過這個方法我試了沒有成功,最後我是把圖片放在根目錄 img 底下,用相對路徑去拿)

留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源