# 給 React Native 開發者的 Flutter 指南 > 學習如何將 React Native 開發經驗應用於 Flutter 應用程式開發。 本文件適用於想要將現有 React Native（RN）知識應用於 Flutter 行動應用程式開發的開發者。如果你已經理解 RN 框架的基本原理，則可以將本文件作為入門學習 Flutter 開發的參考。 你可以將本文件當作食譜（cookbook）使用，根據自己的需求跳著閱讀、尋找最相關的問題。 ## 給 JavaScript 開發者（ES6）的 Dart 入門 和 React Native 類似，Flutter 採用反應式（reactive-style）視圖。不過，RN 會轉譯成原生元件 (Widget)，而 Flutter 則是直接編譯為原生程式碼。Flutter 能夠控制螢幕上的每一個像素，因此不需要 JavaScript 橋接層，能夠避免由此產生的效能問題。 Dart 是一個容易學習的語言，具備以下特點： * 提供一個開源、可擴展的程式語言，可用於開發 Web、伺服器及行動應用程式。 * 採用物件導向、單一繼承，並使用類似 C 語法，能夠 AOT 編譯成原生程式碼。 * 可選擇性地轉譯（transcompile）成 JavaScript。 * 支援介面（interface）與抽象類別（abstract class）。 以下簡單說明 JavaScript 與 Dart 之間的一些差異。 ### 進入點（Entry point） JavaScript 沒有預先定義的進入函式（entry function）—你需要自行定義進入點。 ```js // JavaScript function startHere() { // Can be used as entry point } ``` 在 Dart 中，每個應用程式都必須有一個頂層的 `main()` 函式，作為應用程式的進入點。 ```dart /// Dart void main() {} ``` ### 輸出到主控台 要在 Dart 中輸出到主控台，請使用 `print()`。 ```js // JavaScript console.log('Hello world!'); ``` ```dart /// Dart print('Hello world!'); ``` ### 變數 Dart 是型別安全的——它結合了靜態型別檢查與執行階段檢查，確保變數的值始終符合該變數的靜態型別。雖然型別是強制性的，但有些型別註解是可選的，因為 Dart 會執行型別推斷。 #### 建立與賦值變數 在 JavaScript 中，變數無法指定型別。 在 [Dart][] 中，變數必須明確指定型別，或讓型別系統自動推斷正確的型別。 ```js // JavaScript let name = 'JavaScript'; ``` ```dart /// Dart /// Both variables are acceptable. String name = 'dart'; // Explicitly typed as a [String]. var otherName = 'Dart'; // Inferred [String] type. ``` 如需更多資訊，請參閱 [Dart 的型別系統][Dart's Type System]。 #### 預設值 在 JavaScript 中，未初始化的變數為 `undefined`。 在 Dart 中，未初始化的變數會有初始值 `null`。 由於在 Dart 中數字也是物件，因此即使是數值型別的未初始化變數，其值也會是 `null`。 :::note 自 2.12 版起，Dart 支援 [Sound Null Safety][]， 所有基礎型別預設為不可為 null，必須初始化為非 null 的值。 ::: ```js // JavaScript let name; // == undefined ``` ```dart // Dart var name; // == null; raises a linter warning int? x; // == null ``` 如需更多資訊，請參閱 [變數][variables] 的文件。 ### 檢查 null 或零值 在 JavaScript 中，數值 1 或任何非 null 的物件，在使用 `==` 比較運算子時，會被視為 `true`。 ```js // JavaScript let myNull = null; if (!myNull) { console.log('null is treated as false'); } let zero = 0; if (!zero) { console.log('0 is treated as false'); } ``` 在 Dart 中，只有布林值 `true` 會被視為 true。 ```dart /// Dart var myNull = potentiallyNull(); if (myNull == null) { print('use "== null" to check null'); } var zero = 0; if (zero == 0) { print('use "== 0" to check zero'); } ``` ### 函式 Dart 和 JavaScript 的函式大致相似。 主要的差異在於宣告方式。 ```js // JavaScript function fn() { return true; } ``` ```dart /// Dart /// You can explicitly define the return type. bool fn() { return true; } ``` 如需更多資訊，請參閱 [functions][] 的文件。 ### 非同步程式設計 #### Futures 與 JavaScript 類似，Dart 支援單執行緒（single-threaded）執行。在 JavaScript 中， `Promise` 物件代表非同步操作最終完成（或失敗）及其結果值。 Dart 則使用 [`Future`][] 物件來處理這類情境。 ```js // JavaScript class Example { _getIPAddress() { const url = 'https://httpbin.org/ip'; return fetch(url) .then(response => response.json()) .then(responseJson => { const ip = responseJson.origin; return ip; }); } } function main() { const example = new Example(); example ._getIPAddress() .then(ip => console.log(ip)) .catch(error => console.error(error)); } main(); ``` ```dart // Dart import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future _getIPAddress() { final url = Uri.https('httpbin.org', '/ip'); return http.get(url).then((response) { final ip = jsonDecode(response.body)['origin'] as String; return ip; }); } } void main() { final example = Example(); example ._getIPAddress() .then((ip) => print(ip)) .onError((error, _) => print(error)); } ``` 如需更多資訊，請參閱 [`Future`][] 物件的文件。 #### `async` 與 `await` `async` 函式宣告用於定義非同步函式。 在 JavaScript 中，`async` 函式會回傳一個 `Promise`。 `await` 運算子則用來等待 `Promise`。 ```js // JavaScript class Example { async function _getIPAddress() { const url = 'https://httpbin.org/ip'; const response = await fetch(url); const json = await response.json(); const data = json.origin; return data; } } async function main() { const example = new Example(); try { const ip = await example._getIPAddress(); console.log(ip); } catch (error) { console.error(error); } } main(); ``` 在 Dart 中，`async` 函式會回傳 `Future`，而該函式的主體會被排程於之後執行。 `await` 運算子用於等待 `Future`。 ```dart // Dart import 'dart:convert'; import 'package:http/http.dart' as http; class Example { Future _getIPAddress() async { final url = Uri.https('httpbin.org', '/ip'); final response = await http.get(url); final ip = jsonDecode(response.body)['origin'] as String; return ip; } } /// An async function returns a `Future`. /// It can also return `void`, unless you use /// the `avoid_void_async` lint. In that case, /// return `Future`. void main() async { final example = Example(); try { final ip = await example._getIPAddress(); print(ip); } catch (error) { print(error); } } ``` 如需更多資訊，請參閱 [async and await][] 的文件。 ## 基礎知識 ### 如何建立一個 Flutter 應用程式？ 若要使用 React Native 建立應用程式， 你會在命令列執行 `create-react-native-app`。 ```console $ create-react-native-app ``` 要在 Flutter 中建立應用程式，可以採用以下其中一種方式： * 使用已安裝 Flutter 與 Dart 外掛程式的 IDE。 * 在命令列執行 `flutter create` 指令。請確保 Flutter SDK 已加入您的 PATH。 ```console $ flutter create ``` 如需更多資訊，請參閱 [Getting started][]，該文件會引導你建立一個按鈕點擊計數器應用程式。建立一個 Flutter 專案會產生所有你需要的檔案，讓你可以在 Android 和 iOS 裝置上執行範例應用程式。 ### 如何執行我的應用程式？ 在 React Native 中，你會在專案目錄下執行 `npm run` 或 `yarn run`。 你可以用以下幾種方式執行 Flutter 應用程式： * 在已安裝 Flutter 與 Dart 外掛程式的 IDE 中使用「執行（run）」選項。 * 在專案根目錄下執行 `flutter run`。 你的應用程式會在已連接的裝置、iOS 模擬器或 Android 模擬器上執行。 如需更多資訊，請參閱 Flutter [Getting started][] 文件。 ### 如何匯入元件 (Widgets)？ 在 React Native 中，你需要匯入每一個所需的元件。 ```js // React Native import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; ``` 在 Flutter 中，若要使用 Material Design 元件，請匯入 `material.dart` 套件。若要使用 iOS 風格的元件，請匯入 Cupertino 函式庫。若想使用更基礎的元件組合，請匯入 Widgets 函式庫。 或者，你也可以自行撰寫元件函式庫並加以匯入。 ```dart import 'package:cupertino_ui/cupertino_ui.dart'; import 'package:flutter/widgets.dart'; import 'package:material_ui/material_ui.dart'; import 'package:my_widgets/my_widgets.dart'; ``` 無論你匯入哪個元件 (Widgets) 套件， Dart 只會載入你在應用程式中實際使用到的元件。 如需更多資訊，請參閱 [Flutter Widget Catalog][]。 ### Flutter 中對應於 React Native「Hello world!」應用程式的是什麼？ 在 React Native 中，`HelloWorldApp` 類別繼承自 `React.Component`， 並透過實作 render 方法來回傳一個 view 元件。 ```js // React Native import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const App = () => { return ( Hello world! ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' } }); export default App; ``` 在 Flutter 中，你可以使用核心元件函式庫中的 `Center` 和 `Text` 元件，建立一個相同的 "Hello world!" 應用程式。 `Center` 元件會成為元件樹（widget tree）的根節點，並擁有一個子元件，即 `Text` 元件。 ```dart // Flutter import 'package:material_ui/material_ui.dart'; void main() { runApp( const Center( child: Text('Hello, world!', textDirection: TextDirection.ltr), ), ); } ``` 下列圖片展示了基本 Flutter「Hello world!」應用程式在 Android 與 iOS 上的使用者介面。
Hello world app（Android）
Android
Hello world app（iOS）
iOS
現在你已經看過最基本的 Flutter 應用程式，下一節將說明如何善用 Flutter 豐富的元件函式庫，打造現代且精緻的應用程式。 ### 我該如何使用元件並將其巢狀組合成元件樹（widget tree）？ 在 Flutter 中，幾乎所有東西都是元件（Widget）。 元件是應用程式使用者介面的基本構建區塊。 你可以將元件組合成一個階層結構，這稱為元件樹（widget tree）。 每個元件都巢狀於其父元件之內，並從父元件繼承屬性。 甚至連應用程式物件本身也是一個元件。 這裡沒有獨立的「application」物件。 相反地，根元件（root widget）扮演了這個角色。 一個元件可以定義： * 結構性元素——例如按鈕或選單 * 樣式元素——例如字型或配色方案 * 版面配置的某個面向——例如內距（padding）或對齊（alignment） 以下範例展示了使用 Material 函式庫元件的「Hello world!」應用程式。在這個例子中，元件樹巢狀於 `MaterialApp` 根元件之中。 ```dart // Flutter import 'package:material_ui/material_ui.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar(title: const Text('Welcome to Flutter')), body: const Center(child: Text('Hello world')), ), ); } } ``` 以下圖片展示了由 Material Design 元件所構建的 "Hello world!" 範例。 你可以發現，這個版本比最基本的 "Hello world!" 應用程式提供了更多的功能。
Hello world app（Android）
Android
Hello world app（iOS）
iOS
在撰寫應用程式時，你會使用兩種類型的元件： [`StatelessWidget`][] 或 [`StatefulWidget`][]。 `StatelessWidget` 顧名思義，就是沒有狀態的元件。 `StatelessWidget` 只會被建立一次，外觀永遠不會改變。 `StatefulWidget` 則會根據接收到的資料或使用者輸入，動態地改變其狀態。 無狀態元件（stateless widgets）和有狀態元件（stateful widgets）之間最重要的差異在於， `StatefulWidget` 會有一個 `State` 物件來儲存狀態資料， 並在元件樹重建時保留這些資料，因此不會遺失。 在簡單或基礎的應用程式中，巢狀元件很容易管理； 但隨著程式碼基礎擴大、應用程式變得複雜時， 你應該將巢狀過深的元件拆分為回傳元件的函式或更小的類別。 建立獨立的函式與元件可以讓你在應用程式內重複使用這些元件。 ### 如何建立可重複使用的元件 (Components)？ 在 React Native 中，你會定義一個函式（或類別）來建立可重複使用的元件（Component）， 然後使用 `props` 方法來設定或回傳所選元素的屬性和值。 在下方範例中，定義了一個 `CustomCard` 函式，並在父元件（Parent Component）中使用它。 ```js // React Native const CustomCard = ({ index, onPress }) => { return ( Card {index}