React Native

在上一篇 React Native 初心者攻略 中有說明如何在實體 iPhone 上開發

透過 AppDelegate.m 這個檔案我們可以將 localhost 手動更改成電腦 ip 來達到實機測試的目的

但是這樣的開發方式有幾個缺點

  1. 需要經常手動去做更改,尤其當你是使用筆電,甚至是和其他人共同開發的狀況,就會常常在 merge 時衝突,除非團隊都使用 localhost 以 simulator 進行開發
  2. 沒辦法在實體機器上 Debug in Chrome

在開發一段時間後,實在受不了,好在找到了自動設定的方法

透過 shell script 抓取電腦的 IP 後,寫入到專案

設置方法

抓取電腦 IP

我們需要先寫出能夠抓取電腦 IP 的指令

網路上大多使用這個指令,可以先填到 terminal 執行看看,確認 IP 是否正確

ifconfig | grep inet\ | tail -1 | cut -d " " -f 2

但是因為我們專案後端 server 有使用到 docker ,使用上面 command 抓到的是錯誤的 IP

所以我需要改成這樣

ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | head -1

OK 我們現在能夠拿到正確的 IP 了

Add Run Script

再來我們需要設定在專案執行時執行一段 shell script 去抓取 IP 寫入到專案中

照著圖中藍色 focus 的地方找到 Build Phases

addScript.png

新增一個 Run Script 後的畫面

editScript.png

接下來就是填入主角 script 了

下面的 script 會在專案的 INFOPLIST 裡新增一個 SERVER_IP 的欄位,並把 IP 寫入

1
2
3
4
5
6
INFOPLIST="${TARGET_BUILD_DIR}/${INFOPLIST_PATH}"
echo "writing to $INFOPLIST"
PLISTCMD="Add :SERVER_IP string $(ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | head -1)"
echo -n "$INFOPLIST" | xargs -0 /usr/libexec/PlistBuddy -c "$PLISTCMD" || true
PLISTCMD="Set :SERVER_IP $(ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v '127.0.0.1' | head -1)"
echo -n "$INFOPLIST" | xargs -0 /usr/libexec/PlistBuddy -c "$PLISTCMD" || true

填好之後會像這樣

addedScript.png

AppDelegate.m 讀取 SERVER_IP

打開 AppDelegate.m

將原本

1
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

替換成能夠動態改變 SERVER_IP 的 code

1
2
3
4
NSString *serverIP = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"SERVER_IP"];
NSString *jsCodeUrlString = [NSString stringWithFormat:@"http://%@:8081/index.ios.bundle?platform=ios&dev=true", serverIP];
NSString *jsBundleUrlString = [jsCodeUrlString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
jsCodeLocation = [NSURL URLWithString:jsBundleUrlString];
AppDelegate.png

這時候你可以測試看看 simulator 和 real device 上是不是都能正常運作,可以的話就成功囉!

Debug in Chrome on Real Device

找到 RCTWebSocketExecutor.m 的 setUp

RCTWebSocketExecutor.png

將這行

1
NSString *URLString = [NSString stringWithFormat:@"http://localhost:%zd/debugger-proxy?role=client", port];

替換成

1
2
NSString *serverIP = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"SERVER_IP"];
NSString *URLString = [NSString stringWithFormat:@"http://%@:%zd/debugger-proxy?role=client", serverIP, port];

這邊一樣是將 localhost 改成 SERVER_IP

實體裝置就能透過 wifi 在電腦的 chrome 上進行 debug 了,趕快試試看!

Reference

http://moduscreate.com/automated-ip-configuration-for-react-native-development/

留言與分享

React Native

由於 React 的火熱程度,身邊許多朋友都開始接觸 React ,我也推薦他們玩玩看 React Native ,我覺得 React 的入門門檻有些其實和 React 本身無關,像是 Webpack, Babel 等等都多少在無形中增加了入門的難度,且有許多範例可能還使用了 ES6 語法,雖然不是必要,但可能會造成初學者混淆、失去信心,使學習過程更不順利。

然而 React Native 完全就是一個超棒的東西,只要跟著官網的教學就可以很簡單的開始使用 React 撰寫跨平台的 App,不僅內建支援 ES6 ,還有 Live Reload , Hot Reloading 等強大功能, 甚至能在 Chrome 中 debug ,這些React Native 統統幫你包好了,省去了原先我們在 web 專案開發需要自行加入 webpack, babel 等等的處理過程。

環境建立

相關環境安裝的部分跟著 官網的詳細指示 (別擔心這裡有中文版) 操作就可以了,這部分就不多敘述

建立RN專案

$ npm install -g react-native-cli
$ react-native init AwesomeProject

iOS

環境準備

安裝 Xcode 即可

專案開發

有兩種方法

第一種是使用 Xcode :

開啟專案目錄下的 /ios/AwesomeProject.xcodeproj (應該會以 Xcode 開啟), 按左上角的播放圖示按鈕就會自動開啟 iPhone 模擬器和 Packager server ,並把專案 build 成 App 到模擬器中。

另一種是開啟 terminal 切換到專案目錄

$ react-native run-ios

這個指令可以不用開啟 Xcode 做和上面同樣的事情,一個指令解決,非常簡潔

接著你就可以開始編輯專案目錄下的 index.ios.js 開始開發你的專案。

Tips

在模擬器的 RN App 中你可以用快捷鍵 cmd+D 打開開發 Menu,這邊可以設定 Debug in Chrome, Live Reload, Hot Reloading 等等功能。

若需要手動刷新可以使用熱鍵 cmd+R

另外,如果你有實體 Apple 裝置的話,也能夠直接在實體裝置上測試、開發

  1. 將 Apple 裝置用USB線連接到電腦,並和電腦連接同一個 wifi

  2. 將專案用 Xcode 開啟(上面的第一種方法)

  3. 在 Xcode 左上角播放圖示的右方應該可以看到 寫著 Apple 裝置的選項,點按後選到自己的實體裝置

  4. 打開 Xcode 左邊檔案管理的導覽列 Tree View,找到 AwesomeProject/AppDelegate.m 這個檔案打開來 可以在裡面找到這段,相信看到註解大家應該都知道要怎麼做了,把 localhost 換成電腦的 ip 就可以了

    1
    2
    3
    4
    5
    6
    7
    8
    /**
    * To run on device, change `localhost` to the IP address of your computer
    * (you can get this by typing `ifconfig` into the terminal and selecting the
    * `inet` value under `en0:`) and make sure your computer and iOS device are
    * on the same Wi-Fi network.
    */
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
  5. 按下 Xcode 左上角的播放鍵開始 Run 囉

Android 環境準備

由於目前我主要都是在 iOS 上開發, Android 部分還沒有很了解,如果有漏掉什麼還請各位大大提醒

Android 在 OS X 上的環境準備相對 iOS 來說稍微麻煩一點,但也不難 細心按照官方指示應該就能成功囉

參考這裡

開發準備

安裝完 Android SDK 和 Genymotion 之後

先打開 Genymotion 創建一個模擬器啟動

接著開啟 terminal 切到專案目錄下

$ react-native run-android

然後就可以編輯 index.android.js 開始開發了

在模擬器中按下 menu 按鈕可以打開開發 Menu ,這邊可以設定 Debug in Chrome, Live Reload, Hot Reloading 等等功能。

如何使用別人寫好的 library, Package

我的同事 yaode 寫了一篇詳細完整的教學文章 大家可以參考看看

http://trunk-studio.com/blog/react-native-how-to-use-component/

記得有用到文章內的方法 link library 的話,是需要重新 build App 到模擬器才能正常運作的喔!(run-ios / run-android)

留言與分享

這幾天在幫公司處理 iOS APP 上架的事情,整個流程需要一堆簽章,真的很麻煩

其中最雷的就是這篇要講的證書的簽發者無效,是什麼證書的簽發者無效呢?

我所有的 Apple 開發相關憑證上面全部都寫簽發者過期....

查了才知道是 Apple 之前給開發者的憑證 ( Apple World Wide Developer Relation Certification Authority ) 有效期限到 2016.2.14 ,也就是說這是一個熱騰騰的雷阿!

解決方法:

  1. 打開 Keychain 在登陸和系統中刪除過期的這一個 Apple World Wide Developer Relation Certification Authority
  2. 下載並安裝這個新的憑證 WWDR intermediate certificate

安裝之後再回去看一下Keychain應該就不會出現簽發者過期了,新的有效期限是 2023.2.8

Reference

http://blog.leanote.com/post/kilig/Failed-to-locate-or-generate-matching-signing-assets

留言與分享

  • 第 1 頁 共 1 頁

DMoon

熱愛科技的資工系學生,喜歡學習新的技術

目前主要開發 Web APP

較熟悉的技術是 Node.JS / React.JS


學生 / 創科資訊實習生


Taichung, Taiwan