# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Margelo (@margelo_com) · 平台：X (Twitter) · 日期：2026-05-27

> 原始來源：https://x.com/margelo_com/status/2059308949971562995

## 中文摘要

打造流暢的 React Native 鍵盤體驗：深入解析跨平台處理機制。

在 React Native 開發中，鍵盤處理往往是 UI 最不穩定的環節。iOS 與 Android 在底層實作上的巨大差異，加上 Android 15 強制推行的「邊對邊（edge-to-edge）」顯示模式，導致傳統的 `KeyboardAvoidingView` 在現代 Android 裝置上經常失效，造成輸入框被遮擋或佈局跳動等問題。

**iOS 與 Android 的底層機制差異**
iOS 與 Android 對鍵盤事件的處理邏輯截然不同，這是造成跨平台開發困難的主因：
- **iOS（排程動畫）**：系統會發送 `UIKeyboardWillShowNotification` 等通知，並明確告知動畫的持續時間與曲線。開發者只需同步排程動畫，系統便會自動進行插值運算，實現鍵盤與 UI 的同步滑動。
- **Android（逐幀與 Inset 模型）**：Android 沒有統一的鍵盤事件 API。現代 Android（API 35+）強制採用「邊對邊」模式，系統不再自動調整視窗大小，而是透過 `WindowInsetsAnimationCallback` 提供逐幀的鍵盤高度資訊（Insets）。開發者必須自行處理這些資訊，否則無法實現平滑的跟隨動畫。

**為什麼 React Native 內建元件表現不佳**
React Native 內建的 `KeyboardAvoidingView` 在 iOS 上表現良好，但在 Android 上卻存在結構性缺陷：
- **缺乏逐幀資訊**：它未訂閱 Android 的 `WindowInsetsAnimationCallback`，僅依賴已過時的 `keyboardDidShow` 事件，導致 UI 總是在鍵盤動畫結束後才「跳」到定位。
- **佈局合約失效**：當 Android 開啟「邊對邊」模式時，系統不再自動觸發 `adjustResize`，導致 `KeyboardAvoidingView` 無法感知鍵盤高度，進而發生內容被遮擋的狀況。
- **版本碎片化**：Android 不同版本間的行為差異巨大，內建元件並未對此進行抽象封裝，導致開發者需自行處理各版本的相容性。

**解決方案：採用更現代的處理方式**
要達到原生級的流暢體驗，核心架構必須將兩平台的差異映射至單一的動畫數值（如 `Animated.Value` 或 `Reanimated SharedValue`）。Margelo 團隊建議使用 `react-native-keyboard-controller` 函式庫作為替代方案：
- **無縫替換**：該庫提供的 `KeyboardAvoidingView` 擁有與原生相同的 API，但在底層自動處理了 Android 的「邊對邊」模式與逐幀 Inset 監聽。
- **全版本相容**：針對 Android 11 以下的版本，該庫提供了逐幀資訊的 Polyfill，確保在所有支援的裝置上行為一致。
- **進階場景處理**：對於複雜表單，可使用 `KeyboardAwareScrollView` 來自動追蹤焦點輸入框與游標位置；若僅需處理底部工具列，則推薦使用 `KeyboardStickyView`，它能直接將子元件向上平移鍵盤高度，避免觸發昂貴的佈局重算（Flex recompute）。

**開發建議與最佳實踐**
- 審視現有專案：若尚未針對 Android 15 的「邊對邊」變更進行稽核，建議立即檢查鍵盤互動邏輯。
- 避免依賴 `LayoutAnimation`：在 Android 上，其時序難以與鍵盤動畫曲線匹配，容易造成視覺上的卡頓。
- 優先使用專用元件：對於需要「黏貼」在鍵盤上方的 UI（如聊天輸入框），直接使用 `KeyboardStickyView` 是最輕量且穩定的選擇，它不會干擾頁面其餘部分的佈局。

## 標籤

教學資源, iOS, Android, 其他, React Native