如何在本机反应中使用socket.io

Question

我想在以下代码中使用socket.io：

import React, { Component } from "react";
import { View } from "react-native";
import Unit from "../codes/Unit";

export default class Reservation extends Component {
  render() {
    return (
      <View>
        <Unit title="AC unit 1" />
        <Unit title="AC unit 2" />
        <Unit title="AC unit 3" />
        <Unit title="DC unit 1" />
        <Unit title="DC unit 2" />
        <Unit title="DC unit 3" />
      </View>
    );
  }
}

因此，当某个设备上的用户从其他所有设备上的所有单元中保留一个单元时，就会看到该单元已被保留

预订代码如下：

import React, { useState } from "react";
import {
  Text,
  View,
  Button,
  Alert,
  Switch,
  StyleSheet,
  Modal,
  TextInput,
} from "react-native";


const Unit = (props) => {
  const [isSwitchEnabled, setSwitch] = React.useState(true);
  const [isModalVisible, setModal] = React.useState(false);
  const [isReserveButtonVisible, setVisibilty] = useState(true);
  const [isCancelButtonVisible, setVisibilty2] = useState(false);
  return (
    <View>
      <Modal transparent={true} visible={isModalVisible} animationType="slide">
        <View style={styles.modalView1}>
          <View style={styles.modalView2}>
            <Text>Please enter a password to reserve the unit </Text>
            <TextInput style={styles.modalInput} placeholder="e.g. 56426" />
            <Button
              title="Save"
              onPress={() => {
                setSwitch(false), setModal(false), setVisibilty(false);
                setVisibilty2(true),
                  setTimeout(() => {
                    setSwitch(true), setModal(false), setVisibilty(true);
                    setVisibilty2(false),
                      Alert.alert(
                        "Unfortunately the reservation time ran out and no vehicle has arrived at the station so the reservation was cancelled."
                      );
                  }, 20000);
              }}
            />
            <Button
              title="Cancel"
              onPress={() => {
                setModal(false);
              }}
            />
          </View>
        </View>
      </Modal>
      <Text>{props.title}</Text>
      <>
        {isReserveButtonVisible ? (
          <Button
            title="Click here to reserve"
            visible={isReserveButtonVisible}
            onPress={() => {
              Alert.alert(
                "Please be noted that the unit is reserved for the next hour only ",
                ".",
                [
                  {
                    text: "Reserve",
                    onPress: () => {
                      setModal(true);
                    },
                  },
                  { text: "Cancel" },
                ]
              );
            }}
          />
        ) : null}
        {isCancelButtonVisible ? (
          <Button
            title="Click here to cancel"
            visible={isCancelButtonVisible}
            onPress={() => {
              Alert.alert(
                "Please be noted that now you are canceling your reservation",
                ".",
                [
                  {
                    text: "Yes",
                    onPress: () => {
                      setSwitch(true), setVisibilty(true);
                      setVisibilty2(false);
                    },
                  },
                  { text: "No" },
                ]
              );
            }}
          />
        ) : null}
      </>
      <Switch value={isSwitchEnabled} />
    </View>
  );
};

const styles = StyleSheet.create({
  modalView1: {
    backgroundColor: "#000000aa",
    flex: 1,
  },
  modalView2: {
    backgroundColor: "#ffffff",
    margin: 50,
    padding: 40,
    borderRadius: 10,
    alignItems: "center",
  },
  modalInput: {
    borderWidth: 1,
    borderColor: "#777",
    padding: 8,
    margin: 10,
    width: 200,
  },
});

export default Unit;

我已经安装了socket.io并建立了服务器以及所有内容

服务器代码：

const express = require("express");
const { Socket } = require("socket.io-client");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3005;

io.on("connection", (socket) => {
  console.log("a user connected");
});

server.listen(port, () => console.log("server running on port " + port));

很长的帖子很抱歉 并预先感谢