0%

在跟 React Native 搏鬥近兩個月後,navigation 還是在我不經意的情況下爆炸了。

route decoupling

這個問題出在我把 navigator 這個屬於 component 範疇的 object 傳給 redux action,導致 decoupling 不完全;另外一個問題是我違反了 component pattern,階層較低的 component 不該有機會能夠直接參考到階層較高的 component。例如以下的 code。

閱讀全文 »

由於 app 需要 Facebook 第三方登入的功能,需要 Facebook SDK;好歹 React Native 也是 Facebook 官方的開源專案,為 React Native 開發一個 react-native-fbsdk package 是一定要的。SDK、npm package 與開發框架全員到齊,一副勢如破竹的氣勢,要寫出一支強大的 app 應該不會有什麼問題了吧?

殊不知這三個傢伙從此鬧內鬨,宛如八點檔一樣每個禮拜上演兄弟鬩牆的慘劇。

Monday morning: everything is broken

這次三兄弟不賣布丁,改鬧內鬨了。另外,以下問題與解決方案一律都只討論 iOS

閱讀全文 »

樣式上的差異

在 React Native,如果需要觸控區域,我們有兩個選擇:<TouchableWithoutFeedback /><TouchableHighlight />。根據文件,官方並不希望我們使用前者,原因基於前者不會對觸控產生回饋,會讓使用者對觸控是否有效產生不必要的誤解。

實際使用之後,我發現兩者另外一項區別在於 <TouchableWithoutFeedback /> 沒有預設樣式,實際使用起來就像是一個隱形的容器,包住內部的元素,但又不會與內部的容器互相影響;而 <TouchableHighlight /> 本身則會形成一個區塊,會與內部的元素相互影響。至於之前的版本曾經有使用者提出 <TouchableHighlight /> 可能是為了產生回饋的視覺效果,而有效能上的問題。但在 0.28.x 之後,至少我實際使用到現在還沒有遇到嚴重的效能問題,即使是在最複雜的編輯履歷頁面也沒有。

閱讀全文 »

React Native 雖然有 React 一詞,但與 React.js 的關係還是僅止於名稱而已。從 0.28.x 開始,flexbox 被調整地更接近 CSS3 標準。在 0.28.x 之前,對一個 <View /> 填上 flex: 1 屬性並不會劇烈地改變 <View /> 的呈現形式。但 0.28.x 之後,flex 屬性開始具備延展性。也就是說,我們不能再隨意地為 <View /> 添加 flex 屬性否則在需要 inline 樣式的容器中,所有的元素將被延展,導致元素與容器一起變形。

#8691 [0.29] With flexWrap: ‘wrap’, unexpected margin appears between wrapped rows

另外,像標籤這樣需要一個接著一個排成一列的樣式,在 0.28.x 之前只要加上 flexDirection: 'row'flexWrap: 'wrap' 即可;但 0.28.x 之後,還需要加上 alignItems: 'left' (或 alignItems: 'right',如果需要靠右對齊的話),在此可以簡單地類比成網頁端的 float: left (或 float: right)。如果不加上這個屬性的話,容器內的元素將會在底部產生成因不明的空白,如 issue 中的截圖所示。

問題

我的 Ruby on Rails 專案我都習慣會寫 RSpec,但問題是只要專案一變大,RSpec 就會跑個二到三分鐘,以前我不是傻傻地盯著畫面等它完成,不然就是偷閒跑去看影集,往往把一集看完了才想起來有 RSpec 在執行。

昨天晚上靈機一動,想到之前在學 webpack 時,別人寫的 Yeoman generator 透過 iTerm 的通知功能在 bundle 打包完成通知開發者 (Turbo87/webpack-notifier)。於是我就想,有沒有可能以盡量簡單的方法去解決這樣的問題?

閱讀全文 »

問題

letter-spacing 會在 所有字元的尾端 都加上空白以達成字元間隔的效果。但事實上我們需要的只有 在字元與字元間 插入空白即可,最後的字元其實不需要加上空白。因此我們需要做一些 hack 來調整。

閱讀全文 »

問題

iOS app 雖然會在使用者不再輸入文字時自動隱藏螢幕鍵盤,但鍵盤隱藏時有過場動畫,如果鍵盤的過場動畫與自訂動畫同時發生,就會有螢幕卡頓的情形。

閱讀全文 »