前言：當設計師說"這個頁面要適配所有手機和平板…"

“什么？React Native不支持CSS媒體查詢？那怎么實現響應式布局？”——這是很多剛接觸React Native的開發者會遇到的靈魂拷問。

但別慌，沒有@media，我們照樣能玩轉多端適配！想象一下：你的App在iPhone SE的小屏幕上優雅排版，在iPad Pro的大屏上自動切換為多欄布局，甚至橫豎屏旋轉時也能智能調整——這一切不需要復雜的CSS，只需要幾行JavaScript和React Native的"黑科技"。

本文將揭秘React Native響應式布局的五大實戰方案，從最基礎的Dimensions API到高階的HOC封裝，讓你徹底告別"一刀切"的UI設計，輕松打造專業級自適應應用。

（文末有驚喜：我們甚至會用一段代碼讓同一個組件在手機、平板、折疊屏上表現迥異！）

---

一、為什么React Native需要"另類"響應式？

1.1 移動端的碎片化比Web更瘋狂

在Web開發中，我們習慣用媒體查詢解決不同視口的問題，但移動端的情況更復雜：

• 屏幕尺寸從iPhone SE的4.7英寸到iPad Pro的12.9英寸
• 折疊屏手機展開前后尺寸劇變（如三星Galaxy Z Fold）
• 橫豎屏切換導致寬高比瞬間反轉

1.2 React Native的"反常識"設計

與Web不同，React Native：

• 沒有全局的px單位——所有尺寸都是與屏幕密度無關的邏輯像素
• 樣式寫在JavaScript里——無法直接使用CSS媒體查詢
• 布局引擎依賴Yoga——Flexbox的行為有時和Web有差異

?? 關鍵洞察：React Native的響應式不是"斷點查詢"，而是"動態計算"。

---

二、五大實戰方案：從入門到高階

2.1 基礎篇：Dimensions API——最樸素的屏幕探測

import { Dimensions } from 'react-native';const { width, height } = Dimensions.get('window');// 判斷是否為平板
const isTablet = width >= 768; // 動態樣式
const styles = {header: {fontSize: isTablet ? 24 : 16,padding: isTablet ? 20 : 10}
};

適用場景：簡單的是否為手機/平板判斷
缺點：無法實時響應旋轉屏幕

2.2 進階篇：監聽屏幕旋轉事件

通過Dimensions.addEventListener實現橫豎屏感知：

const [orientation, setOrientation] = useState(Dimensions.get('window').width > Dimensions.get('window').height ?