跳到主要內容

如何使用 React Native

註解

React Native 是使用 React 和應用程式平台的原生功能來建置 Android 和 iOS 應用程式的開源架構。使用 React Native，您可以使用 JavaScript 存取平台的 API，並使用 React 元件來描述 UI 的外觀和行為：重複使用、可巢狀的程式碼組合。

參考：https://reactnative.dev.org.tw/

我們 React 指南 中的所有提示也可以用於 React Native。

連線網址​

在開發期間，用於連線到 Socket.IO 伺服器的網址會因平台而異

平台網址
網頁瀏覽器localhost
iOS 模擬器localhost
Android 模擬器10.0.2.2
實際裝置電腦的 IP（前提是您在同一個網路中）

實際裝置範例

socket.js
import { io } from "socket.io-client";

export const socket = io("http://192.168.0.10:3000");
提示

在瀏覽器中開發應用程式時，您還需要在伺服器端啟用 CORS

const io = new Server({
  cors: {
    origin: ["http://localhost:8081"],
  }
});

參考：處理 CORS

常見問題​

Android 上的明文傳輸被封鎖​

從 API 等級 28（Android 9 以上）開始，預設會封鎖明文傳輸，這表示您將無法連線到沒有 SSL（http://）的伺服器。

您可以在開發期間新增以下設定以允許它

  • 使用 android:usesCleartextTraffic="true"
android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:usesCleartextTraffic="true"
    />
</manifest>
  • 或使用網路安全設定檔
android/app/src/debug/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain>192.168.0.10</domain>
    </domain-config>
</network-security-config>
android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:networkSecurityConfig="@xml/network_security_config"
    />
</manifest>

參考：https://developer.android.com/privacy-and-security/security-config

使用自簽憑證​

您可以使用下列組態，使用自簽憑證存取 Socket.IO 伺服器

android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:networkSecurityConfig="@xml/network_security_config"
    />
</manifest>
android/app/src/debug/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- needed by the Metro dev server -->
    <domain-config cleartextTrafficPermitted="true">
        <domain>localhost</domain>
    </domain-config>

    <domain-config>
        <domain>192.168.0.10</domain>
        <trust-anchors>
            <certificates src="@raw/mycert" />
        </trust-anchors>
    </domain-config>
</network-security-config>
android/app/src/debug/res/raw/mycert.pem
-----BEGIN CERTIFICATE-----
[...]
-----END CERTIFICATE-----
注意

IP 位址必須包含在自簽憑證的 subjectAltName 中

$ openssl req -x509 -nodes \
  -newkey rsa:2048 \
  -out cert.pem \
  -keyout key.pem \
  -subj '/CN=localhost' \
  -addext 'subjectAltName = IP:192.168.0.10'

否則，用戶端將無法建立連線。

您可以使用下列指令檢查

$ openssl x509 -in cert.pem -text -noout | grep X509v3 -A 1
        X509v3 extensions:
            X509v3 Subject Key Identifier:
                C3:67:68:1A:F2:2C:F2:E8:B9:7A:7D:25:3F:5D:E0:AF:B5:B0:AF:16
            X509v3 Authority Key Identifier:
                C3:67:68:1A:F2:2C:F2:E8:B9:7A:7D:25:3F:5D:E0:AF:B5:B0:AF:16
            X509v3 Basic Constraints: critical
                CA:TRUE
            X509v3 Subject Alternative Name:
                IP Address:192.168.0.10

參考：https://developer.android.com/privacy-and-security/security-config

範例專案​

各位，謝謝閱讀！

返回範例清單