這是一個 2026年現代化 的示範專案,展示如何讓 React Native (0.84+) 與 Android (Kotlin 2.3+) 進行高效的雙向通訊。本版本特別強化了 視覺美學 與 代碼健壯性。
- 最新技術棧:React Native 0.84, React 19, Android 15 (SDK 35)。
- AndroidX & Kotlin 2.3:全面遷移至 AndroidX 並使用最新的 Kotlin 編譯器。
- Functional Components & Hooks:JS 端採用
useState與useEffect。 - 視覺美化:
- Android: 使用 Material CardView, ConstraintLayout 與 HSL 色彩系統。
- React Native: 實現了陰影 (Shadows)、圓角與類玻璃擬態 (Glassmorphism) 效果。
graph TD
subgraph "React Native (JS/TS Side)"
JS[React Components] --> Hooks[Hooks / useState]
Hooks --> RN_Modules[NativeModules / DeviceEventEmitter]
end
subgraph "Bridge (JSI / Legacy Bridge)"
RN_Modules <--> |"Synchronous / Asynchronous"| Bridge_Logic[JSON / JSI Communication]
end
subgraph "Android (Native Side)"
Bridge_Logic <--- "Native Interface" ---> KT_Module[Kotlin Native Module]
KT_Module <--- "Event / Call" ---> Android_OS[Android System / UI]
end
style JS fill:#61DAFB,stroke:#333
style KT_Module fill:#7F52FF,stroke:#333,color:#fff
style Bridge_Logic fill:#f9f,stroke:#333
.
├── app
│ ├── js # React Native JS 原始碼 (Hooks + Styled)
│ │ ├── index.js # 進入點與組件註冊
│ │ └── communication1-3.js # 功能組件示範
│ ├── src/main/java # Android Kotlin 原始碼 (AndroidX)
│ │ └── com/.../hybrid
│ │ ├── MainActivity.kt # 入口 Activity (Modern UI)
│ │ ├── ReactCommunicationActivity.kt # 通訊範例 Activity
│ │ └── other/ # Native Modules
│ └── build.gradle # App 級與 SDK 配置
├── package.json # NPM 依賴與現代化 Scripts
└── README.md # 說明文件
- Node.js (LTS)
- Android Studio (Koala+)
- JDK 17+
npm install
npm start # 啟動 Metro Bundler
npm run android # 運行 Android App當 JS 端調用 NativeModules 時,React Native 會通過 JSI (JavaScript Interface) 直接映射到原生端的 Kotlin 方法,這比舊版的非同步 Bridge 更快。
import { NativeModules } from 'react-native';
const { ToastAndroidModule } = NativeModules;
// 在組件中調用
ToastAndroidModule.HandleMessage("Hello from RN!");Android 端發送事件,JS 端使用 useEffect 進行監聽,這在處理硬件傳感器數據時非常有用。
useEffect(() => {
const sub = DeviceEventEmitter.addListener('mEventName', (data) => {
setInfo(data);
});
return () => sub.remove(); // 清理資源
}, []);- 記憶體管理:務必在
useEffect的 Cleanup function 中移除監聽器。 - UI 響應:原生按鈕與 RN 視圖的權重分配已在 XML 中優化,避免在大屏幕上比例失調。
- 調試工具:推薦使用 Flipper 進行 Bridge 流量監控。
- ImL1s - iml1s@outlook.com
- GitHub: ImL1s