跳至主要内容

如何在 React Native 中使用

注意

React Native 是一个开源框架，用于使用 React 和应用程序平台的原生功能构建 Android 和 iOS 应用程序。使用 React Native，您可以使用 JavaScript 访问平台的 API，并使用 React 组件描述 UI 的外观和行为：可重用、可嵌套代码的捆绑包。

参考：https://reactnative.net.cn/

我们 React 指南 中的所有提示也适用于 React Native。

连接 URL​

在开发过程中，连接到 Socket.IO 服务器的 URL 会根据您的平台而有所不同

平台URL
网络浏览器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.cn/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.cn/privacy-and-security/security-config

示例项目​

就这样，感谢您的阅读！

返回示例列表