如何与 React Native 一起使用

¥How to use with React Native

note

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

¥React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code.

参考：https://rn.nodejs.cn/

¥Reference: https://rn.nodejs.cn/

我们 React 指南中的所有技巧也可以应用于 React Native。

¥All tips from our React guide can be applied with React Native as well.

连接网址

¥Connection URL

开发期间访问 Socket.IO 服务器的 URL 根据你的平台而有所不同：

¥The URL to reach your Socket.IO server during development varies depending on your platform:

平台	URL
网页浏览器	`localhost`
iOS 模拟器	`localhost`
安卓模拟器	`10.0.2.2`
真实设备	你机器的 IP（前提是你们在同一个网络）

真实设备示例：

¥Example with a real device:

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

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

tip

在浏览器中开发应用时，还需要在服务器端启用 CORS：

¥When developing an application in the browser, you will also need to enable CORS on the server side:

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

参考：处理 CORS

¥Reference: Handling CORS

常见问题

¥Common issues

Android 上的明文流量被阻止

¥Cleartext traffic blocked on Android

从 API 级别 28（Android 9 及更高版本）开始，明文流量默认被阻止，这意味着你将无法访问没有 SSL (http://) 的服务器。

¥Starting with API level 28 (Android 9 and higher), cleartext traffic is blocked by default, which means you won't be able to reach a server without SSL (http://).

你可以添加以下配置以在开发过程中允许它：

¥You can add the following configuration to allow it during development:

与 android:usesCleartextTraffic="true"
¥either with android:usesCleartextTraffic="true"

android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:usesCleartextTraffic="true"
    />
</manifest>

或使用网络安全配置文件：
¥or with a Network Security Configuration file:

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

¥Reference: https://developer.android.com/privacy-and-security/security-config

具有自签名证书

¥With a self-signed certificate

你可以通过以下配置使用自签名证书访问 Socket.IO 服务器：

¥You can reach a Socket.IO server with a self-signed certificate with the following configuration:

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-----

caution

IP 地址必须包含在自签名证书的 subjectAltName 中：

¥The IP address must be included in the subjectAltName of the self-signed certificate:

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

否则客户端将无法建立连接。

¥Else the client won't be able to establish the connection.

你可以使用以下命令检查它：

¥You can check it with the following command:

$ 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