Pi's Blog

前言

當完兵後把 JapanGo 從 Expo SDK 42 升級到 46
(因為 42 已經不能用了)
跨度這麼大的升級必然會導致一些套件不能用
例如 expo-app-loading 和 expo-ads-admob
前者只要改成使用 expo-splash-screen 就可以了
但處理後者花了我不少時間

根據 Expo SDK 45 Doc
expo-ads-admob在 SDK 46 之後就不能用了
建議改用react-native-google-mobile-ads

react-native-google-mobile-ads 基本用法

首先安裝

1

npm install react-native-google-mobile-ads

到 google admob 取得 Android 和 iOS 的 app id (如果還沒有的話)

接著一樣在 google admob 中取得 ad id
或者也可以從 這裡 取得測試id

下一步，編輯app.json
這邊需要注意插入以下程式碼的位置，
react-native-google-mobile-ads 的相關設定必須在 expo 之外

1
2
3
4
5
6
7
8
9

{
  "expo": {
    ...
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx"
  }
}

再來打開你要放廣告的元件
這邊我也 test id 為例

1
2
3
4
5
6
7
8

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

...

<BannerAd
  size={BannerAdSize.BANNER}
  unitId={TestIds.BANNER}
/>

最後一步，由於這個元件需要動用原生 API
代表我們不能夠用 Expo Go 來預覽開發了
而是要改用 expo dev client
這篇我就不深入探討這是什麼
可以先當作我們要客製一個可以動用原生元件的 Expo Go 來用

結果這邊就出錯了

無法 build…

執行 eas build --profile development 後

重點應該在第 27 行(重新排版了一下)

1
2
3
4
5
6
7

/home/expo/workingdir/build/android/app/src/debug/AndroidManifest.xml:17:85-105 Error:
Attribute meta-data#com.google.android.gms.ads.DELAY_APP_MEASUREMENT_INIT@value value=(true) 
from AndroidMenifest.xml:17:85-105 is also present at [:react-native-google-mobile-ads] 
AndroidManifest.xml:19:13-34 value=(false).

Suggestion: add 'tools:replace="android:value"' to <meta-data> element 
at AndroidManifest.xml:17:5-107 to override.

雖然不太清楚意思
但大概可以猜到問題出在Android.Menifest.xml裡的
DELAY_APP_MEASUREMENT_INIT這個值
前者是 true 後者是 false

於是我爬了一些資料:

how do I use react-native-google-mobile-ads with expo and expo go

[Medium] migrate expo-ads-admob to react-native-google-mobile-ads

[github issue] migrate expo-ads-admob to react-native-google-mobile-ads

Add installation guide for Expo users

關鍵是最後一篇
這個留言提到一個可能的解法是進到 android 資料夾更改 AndroidMenifest.xml
但那需要 eject，先盡可能避免這個做法
不過我往下看發現作者有提供在app.json設定menifest的方法:

1
2
3
4
5
6

"react-native-google-mobile-ads": { 
     "android_app_id": "ca-app-pub-3940256099942544~3347511713", 
     "ios_app_id": "ca-app-pub-3940256099942544~1458002511", 
     "delay_app_measurement_init": false, 
     "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you." 
   } 

接著我在進一步去翻套件的檔案
在european-user-consent.mdx裡看到這段說明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

### Delaying app measurement

By default, the Google Mobile Ads SDK initializes app measurement and begins sending user-level event data to Google immediately when the app starts.
If your app will be used by users within the EEA, it is important you prevent app measurement until your first ad has been requested (after consent).

Within your projects `app.json` file, set the `delay_app_measurement_init` to `true` to delay app measurement:

``json
{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "delay_app_measurement_init": true
  }
}
``

這時我就想
既然 error message 說套件的 DELAY_APP_MEASUREMENT_INIT 和 Expo 裡的不合
那就設為 true 吧
然後就成功了!!!!!!!!! 可喜可賀

結論

其實還有很多環節不懂
例如這個 delay app measurement init 是什麼意思
或者說任何跟原生 code 有關的東西我都不知道是什麼意思…
總覺得還有好長一段路要走

但這次的 debug 經驗還不錯
有從 error message 判斷出一些可能的方向
然後看了很多討論串
也實際去翻套件的程式碼
雖然不是完全懂了才解決問題
但也不至於誤打誤撞 不清楚自己做了什麼

總之 APP 的廣告功能又回來啦！

前言

在學習生成動態頁面(dynamic routes)時
看到了兩種方法: getStaticPaths和useRouter
來整理一下他們之間的差異

在 server side 生成動態頁面 getStaticPaths

getStaticPaths 和 getStaticProps 一樣
是只會跑在 build time 的函式
假如我們的頁面數量是根據某個資料決定的
那是不是我們只要在 build time 之前
手中握有那份資料，然後告訴 Next 怎麼依照資料產生頁面
這樣就不用手刻好幾十個頁面檔案
這時就要用到getStaticPaths

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// in '/pages/[id].js'
export const getStaticPaths = async()=>{
  const res = await fetch('https://some-api')
  const data = await res.json()

  const paths = data.map(item=>{
    return{
      params:{id:item.id.toString()}
    }
  })

  return {
    paths, 
    //paths 必須是一個 array 包含數個 object，
    //每個 object 都長這樣: {params: {id:'xxx'}} <--- 註: key 是 id 因為檔名是[id].js
    //這些 object 會作為 prop 分別傳進 getStaticProps 中

    fallback: false
    //當 fallback 為 false 時，如果用戶進到不存在的 route 時，預設會顯示Next.js
  }
}

1
2
3
4
5
6
7
8
9
10
11

// in 'pages/[id].js'
export const getStaticProps = async({params}) => {
  const res = await fetch(`https://some-api/${params.id}`)
  const data = await res.json()

  return {
    props:{ //這個 props 會傳進 page component 中
      data
    }
  }
}

以上動作會在 build time 的時候進行一次

在 client side 產生動態資料 useRouter

另一種情境是
可能我們的網站有連接資料庫，而那個資料庫時常更新
每當資料庫多出現一個 record 時(例如新增一篇貼文)
前端可能也需要多一個頁面來呈現它
但如果因此就需要重新 build 一次的話就太麻煩了
這時就可以用useRouter來達到動態頁面
簡單來說，頁面都是同一個
只是會根據 URL 來取得動態資料

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// in '/pages/[id].js'
import {useRouter} from 'next/router'

export default function Page(){
  const router = useRouter()
  const {id} = router.query 
  // 由於檔名中有 [id]
  // 所以實際 URL 中，'/pages/'之後的字串就會被當作 id params
  // 可藉由 useRouter().query 取得其值

  return (
    <div>
      <p>{id}</p>
    </div>
  )
}

以上動作會在 client side 的每次 request time 運行一次

結語

getStaticPaths 是在 build time 根據你定義的方法動態生成頁面

useRouter 是在 request time 根據瀏覽器的 URL 動態生成參數

前言

最近求職的過程中
看到幾間公司有將 Next.js 列在加分項目
因此提升了我對 Next.js 的好奇心

其實我在滿久以前就聽過 Next 了
只知道是 React 的加強版
針對 React 天生不利於 SEO 的缺點提供解決方案
而且不需要依賴 react-router 就能做到換頁
所以最近正式的來學習一下

途中在 CSS 上遇到了小問題

在 Next 中使用 CSS 的方法

先不論 SASS, CSS-in-JS 這些用法
如果要用正統 CSS 的話
有以下兩種方法

1. 在 _app.js 中引入 global CSS

在 Next 專案中
只有一個地方可以引入純 CSS
就是_app.js，如下

1
2
3
4
5
6

// In _app.js
import '../styles/global.css' // <--- Here!

export default function MyApp({Component, pageProps}){
  return <Component {...pageProps}>
}

如果在其他元件中import 'xxx.css'的話
會出現以下 error

./styles/global.css
Global CSS cannot be imported from files other than your Custom . Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global

2. 在各別頁面或元件中使用 CSS module

CSS module 也是一個見了許久卻沒使用的東西
他主要的功用是 能依照作用範圍切分 CSS 文件的大小

1
2
3
4
5

/* In page.module.css */
.container {
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

1
2
3
4
5
6
7
8
9
10

// In page.js
import styles from './page.module.css'  // <--- Here!

export default function page(){
  return (
    <div className={styles.container}>  {/* <--- Here!*/}
      <h2>This is a page.</h2>
    </div>
  )
}

上面的例子，page.module.css就是專門寫給page.js用的
這樣就可以避免跟其他元件的 class 撞名

以前當我要避免撞名時
不是把 APP 的所有 CSS 都寫在一份檔案
就是極致利用 BEM 規則把每個 class 都寫得超長

用了 CSS module 後
當你去看網頁上實際的 class 會發現他可能長這樣
<div class="container__fbLkO"></div>
CSS module 會在 class 後面加上亂碼
避免跟其他元件的 class 撞名

一些限制

進入正題(前面講了好多別的)
CSS module 雖然方便
但仍然有一些限制
例如在.module.css中
只能用 class 或 id 選擇器
不能用 element 選擇器

意思是不能在.module.css中這樣寫

1
2
3

p {
  color: red;
}

詳細原因可以參考 –> 這個連結 <–

如果基於某些原因必須去選 element
就只能寫在 global.css 中囉

除此之外，偽類偽元素以及選擇器的組合都還是能正常使用的喔

結論

我覺得不管是什麼前端技術(或程式語言技術)
最終都會向元件化靠攏
像 styled component 或今天介紹的 CSS module
都是盡可能的把「屬於元件的部分」跟元件本身放得越近越好
享受方便性的同時，也要同時注意使用上的限制才行