Question

我的应用带有一些屏幕。这些屏幕之一称为“竞赛”。这场比赛会产生具有当前比赛排名的ListView（来自Redux状态）。同一屏幕上有一个TCP连接组件，该组件连接到我的传感器并获取数据（异步）。

当用户单击等级项目时，将打开一个新屏幕，其中包含单击的赛车手当前的圈数（ListView中的项目）。此时，先前的屏幕仍然有效（这很好），因为当TCP组件接收到数据时，我可以在日志中看到它。问题是当用户回击按钮（或使用侧面菜单导航到“种族”）时，重新创建了屏幕本身，并且重新创建了我的TCP组件，这是我不想要的。所以我的问题是：如何防止重新构造此屏幕或使此TCP组件在全局范围内像单例一样工作？我不确定是否有可能或如何使其与Redux一起使用。

更新1 ：这是代码的一部分。在“竞赛”屏幕中，我具有连接TCP套接字的内部功能。

  _connectSensor() {
    console.log("Running connectSensor function...");
    const { lap_info, dispatchAddLap, dispatchSetSensorStatus } = this.props;
    const { race, sensor } = this.props;

    if (sensor.sensor_status == SENSOR_ONLINE) {
      console.log("Already connected!");
      return;
    }

    dispatchSetSensorStatus(SENSOR_CONNECTING);
    //var serverHost = sensor.host;
    //var serverPort = sensor.port;
    var serverHost = "mydomain.com";
    var serverPort = 1212;
    console.log("Sensor host: ",serverHost);
    console.log("Sensor port: ",serverPort);

    this.client = net.createConnection(serverPort, serverHost, () => {
//      client.write('Hello, server! Love, Client.');
        dispatchSetSensorStatus(SENSOR_ONLINE);
    });

    this.client.on('data', (data) => {      
      var obj = JSON.parse(data);            
      dispatchAddLap(obj);              
    });

此功能由一个按钮调用，并且工作正常。当我转到另一个屏幕时，此TCP套接字仍在运行并将数据馈送到我的Redux，这是理想的状态。但是，当我从另一个屏幕返回到该屏幕时，我无法再访问此套接字了.....它们仍在运行并且无法停止。当我单击“开始”时，“ this.client”是一个新对象，因为反应导航会重新创建整个屏幕（我的猜测...）。我可以放一些代码以在断开此屏幕时强制断开连接....但不是我所需要的。即使该屏幕未激活，我也需要保持套接字接收数据（如果用户没有停止）。

更新2 ：我试图将static client = null;添加到类对象中，但是不起作用。在我的“停止”按钮中，我已经添加了调试console.log("Client object:",this.client);的功能，结果如下： 1）当我打开比赛屏幕并单击“开始”，然后单击“停止”时，将为“客户端”返回对象。

2）当我打开竞赛屏幕时，单击“开始”，转到另一个屏幕，返回到竞赛屏幕，然后单击“停止”：“客户”对象返回未定义。

Answer 1

已解决。解决此问题的“关键”是将类导出为新对象，而不仅仅是类。但是我还有另一个问题：如果我需要使用'react-redux'中的'connect'，这是行不通的。因此，我做了自己的ocmponent并创建了函数来分配来自父对象的dispatchFunctions。这是我最后的TCP组件：

import React, { Component } from "react";
import { SENSOR_ONLINE, SENSOR_OFFLINE, SENSOR_CONNECTING } from "../constants";
var net = require("react-native-tcp");

class tcpCon extends Component {
  static myId;
  static dispatchAddLap;
  static dispatchSetSensorStatus;
  static client;
  static sensor_status = SENSOR_OFFLINE;

  constructor(props) {
    super(props);
    console.log("Componente TCP criado! Dados passados: ", props);

    var RandomNumber = Math.floor(Math.random() * 10000 + 1);
    this.myId = RandomNumber;
  }

  setDispatchAddLapFunc(func) {
    this.dispatchAddLap = func;
  }

  setDispatchSetSensorStatusFunc(func) {
    this.dispatchSetSensorStatus = func;
  }

  disconnectSensor() {
    console.log("Disconnecting....Status no componente TCP: ", this.sensor_status);
    if (this.sensor_status == SENSOR_ONLINE) {
      this.sensor_status = SENSOR_OFFLINE;
      // Dispatch sensor offline
      if (this.client) {
        console.log("Client object exists. Need to destroy it....");
        this.client.destroy();        
        this.client = null;
      } else {
        console.log("Client doesn't exists");
      }
    }
  }

  displayObj() {
      console.log("Client nesta conexao:",this.client);
  }

  connectSensor(hostname, port) {
    console.log("Running connectSensor function...myId: ", this.myId);

    console.log("Meu status local:", this.sensor_status);

    if (this.sensor_status == SENSOR_ONLINE || this.client) {
      console.log("Connection already exists! Returning....");
      return;
    }

    //var con = net.createConnection(port, hostname, () => {
    this.client = net.createConnection(port, hostname, () => {
      //      client.write('Hello, server! Love, Client.');
      //            dispatchSetSensorStatus(SENSOR_ONLINE);
      //this.client = con;
      this.sensor_status = SENSOR_ONLINE;
      this.dispatchSetSensorStatus(SENSOR_ONLINE);
    });

    this.client.on("data", data => {
      var obj = JSON.parse(data);
      //console.log("Data arrived: ",obj);
      this.dispatchAddLap(obj);
    });

    this.client.on("error", error => {
      console.log("Erro conectando ao sensor: " + error);
      //          dispatchSetSensorStatus(SENSOR_OFFLINE);
      this.sensor_status = SENSOR_OFFLINE;
      this.dispatchSetSensorStatus(SENSOR_OFFLINE);
    });

    this.client.on("close", () => {
      console.log("Conexão fechada no componente TCP.");
      //          dispatchSetSensorStatus(SENSOR_OFFLINE);
      this.sensor_status = SENSOR_OFFLINE;
      this.dispatchSetSensorStatus(SENSOR_OFFLINE);
    });

    //console.log("Client object na connection:", this.client);


    //this.dispatchAddLap('Hello world!ID '+this.myId.toString());
  }
}

export default new tcpCon();

这就是我打电话的方式：

Con.setDispatchAddLapFunc(dispatchAddLap);
Con.setDispatchSetSensorStatusFunc(dispatchSetSensorStatus)
Con.connectSensor("address",1212);

要断开连接，只需使用此：

Con.setDispatchAddLapFunc(dispatchAddLap); // Just to be sure
Con.setDispatchSetSensorStatusFunc(dispatchSetSensorStatus); // Just to be sure
Con.disconnectSensor();

有了这个，我每次调用此组件时，都会返回相同的对象。

反应导航和创建/销毁操作系统屏幕/组件

1 个答案: