Pi's Blog
0%

發表於 更新於

前言

前幾天跟高中同學去日月潭玩
沒錯是同學會!
沒想到高一到現在已經九年半了
居然還能一起出門過夜
實在是非常難得的友誼

其中有些同學有在關注我的限動
所以對我的app滿好奇的
我就趁機請他們上 google play 下載來測試看看
也因此發現了一個嚴重的破版問題
如圖

可以看到是因為字體太大而導致的破版

原因: 無障礙設定

自從開始用別人的手機測試後
才知道原來還需要考慮無障礙設定

無障礙設定是為了照顧到一些身體機能不足的用戶
在手機上不外乎就是改變字體、對比、或是朗讀模式等等
而這次的case
就是因為我同學的手機把系統字體調大了才會這樣

雖然是個貼心的設定
但對app開發者來說是一大麻煩
因為字體改變意味著版型要跟著調整
也幾乎沒有辦法確保有一個各種字體都好看的排版方式
最終的解法可能有兩種

  1. 極為簡單的排版，字再大都還算可接受
  2. 禁止部分或全部的字體縮放

禁止app字體縮放

我們決定採用第二種方法
雖然這意味著可能會減少眼睛不好的用戶(如長輩)
但我們原先鎖定的客群就是比較偏向年輕用戶
所以並沒有偏離初衷

react native 的 Text 和 TextInput 元件都有提供一個屬性叫做 allowFontScaling
只要設為false就能阻止字體被改

不過如果還要修改app裡的所有元件
真的有點麻煩
其實只要在APP的最上層(如App.js)
直接設定元件的defaultProps
就可以一次更改所有元件囉
如下:

1
2
3
4
5
6
7
Text.defaultProps = {
  allowFontScaling: false
}
TextInput.defaultProps = {
  allowFontScaling: false,
  underlineColorAndroid: "transparent"
}

補充一點
當我把TextInput設為allowFontScaling時
不知道為什麼突然冒出底線
所以必須多加一個underlineColorAndroid: "transparent"的設定

調整完後，正常的版面

結論

無障礙設定給人方便
也帶來一點不方便
往後在思考排版的時候
也要記得考慮到無障礙設定才行

發表於 更新於

前言

整個過年期間後有點小荒廢
於是決定做一些 react 的小 project 練習一下
結果在初始化專案就卡住…

第一行說需要安裝create-react-app
我就覺得怪怪的
之前明明就用過啊
指令也下得一樣
怎麼突然要下載

當時也沒繼續多想就直接按下 y 繼續
結果還是沒執行
這裡有一句非常關鍵:

We no longer support global installation of Create React App.

根據官方文件，現在不支援用全域安裝的方式來執行了
原因是要讓大家盡可能使用最新版本
所以之後每次執行npx create-react-app時
都會當下下載最新版來用

還沒結束

所以我照他的只是把電腦上全域安裝的 create-react-app 移除
但結果完全一樣
我已經檢查過電腦上已經沒有裝了
只好再次求救 google

後來發現是因為 npx 的 cache 要清除
只要執行 npx clear-npx-cache 就可以了

結論

官方呼籲大家盡早把自己電腦上的全域套件移除
以後要建立新的 react 專案
不能再用全域套件來創了
但初始化指令不變
一樣是 npx create-react-app <your-app-name> ㄛ

發表於 更新於

前言

有點久沒發文了，來更新一下近況
現在到了2021年的最後一個月，開始有點壓力了
記得年初的時候訂了個目標，說今年一定要上架APP
現在只剩不到30天，好緊張啊

今天就要來分享一下有關內購式產品的設定

什麼是內購

應用程式內購買項目(In App Purchase, IAP)
是跟買斷相對的概念
意思是應用程式本身也許是免費的，但使用者可能會在APP內課金
沒錯! 就是課金!
無論是單次購買體力，或是訂閱制，pro 等等都屬於 IAP

react native 是可以支援 IAP 的
但在 Expo 上可能就有點麻煩
在 Expo SDK v40 以前，只有 eject 一條路可以走
不想 eject 就沒門

但在 Expo SDK v41 之後，出現了新東西: development client
雖然我還不知道這東西到底是做什麼的以及好在哪
但貌似可以讓各位”Expoer”在不用 eject 的情況下也能使用 native 相關功能
感覺很棒，這樣我就可以應用在去除廣告上了

前置作業

首先我們要完成幾件事情，但因為不是本篇的重點，我會直接放說明文件連結

  1. 安裝 EAS(Expo Application Services)
  2. 將專案至少升級到 Expo SDK v41.0 以上
  3. 擁有 Google play 或 App Store 的開發人員帳號

由於我會先在 Google play 上架，目前就先以 Android 版來示範
iOS 不知道在貴什麼啦爛透ㄌ

安裝 react-native-purchase

以正常流程來說，如果我們要提供內購產品
必須修改 native 程式碼，為 APP 新增一個 com.android.vending.BILLING 的權限
這也是為什麼我們原本需要 eject
但現在

Recent versions of React Native will automatically link the SDK, so all that’s needed is to install the library.

我們只要在專案中安裝 react-native-purchase，直接完成這個部分
就不用再修改原生程式碼了

1
npm install react-native-purchase

Build 出一個 dev-client

首先 npm install expo-dev-client
接著跟著這些步驟 configure EAS (如果你還沒做的話)
最後 eas build -p android --profile development

相關細節可參考官網

註冊 RevenueCat 帳號

其實在前面安裝的 react-native-purchase 除了是為了加上 billing 權限以外
還有一個理由是因為我們要用 RevenueCat
RevenueCat 是一個幫助你完成 IAP 的服務
除了可以統一管理各平台的內購項目外
也可以協助你分析用戶的購買資料
總之也是個蠻棒的東西 ((前提是我有弄成功XD
寫這篇文的現在還在摸索當中
如果最後沒成功就好笑了

先到官網註冊帳號吧