React Native中MQTT代码放置及连接测试方法咨询

嘿，作为刚接触React Native和MQTT的新手，这些问题太正常了！我来一步步帮你理清：

1. 你提供的代码应该粘贴到哪里？ #

你给出的这段MQTT初始化和连接代码，直接放到App.js里就可以，不需要新建额外文件（当然如果后续项目规模变大，你可以把MQTT相关逻辑抽成单独的工具类或者hooks，但入门阶段直接在App.js里测试是最方便的）。

2. App.js里需要编写什么内容来测试MQTT连接？ #

要注意的是，React Native的App.js是组件结构，不能直接把代码堆在顶层，需要放到组件的生命周期里执行。另外，原来的AsyncStorage已经从react-native包中移出，你需要先安装单独的依赖：

npm install @react-native-async-storage/async-storage --save

下面是完整的可直接运行的App.js示例，我把你的代码整合到了函数组件的useEffect钩子中（现在React Native更推荐函数组件+hooks的写法）：

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import init from 'react_native_mqtt';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 初始化MQTT的存储配置
init({ 
  size: 10000, 
  storageBackend: AsyncStorage, 
  defaultExpires: 1000 * 3600 * 24, 
  enableCache: true, 
  reconnect: true, 
  sync : { } 
});

export default function App() {
  useEffect(() => {
    // 连接成功后的回调
    function onConnect() { 
      console.log("✅ MQTT连接成功！");
      // 要是想测试订阅主题，可以在这里加一行：
      // client.subscribe("test/demo-topic");
    }

    // 连接丢失时的回调
    function onConnectionLost(responseObject) { 
      if (responseObject.errorCode !== 0) { 
        console.log("❌ MQTT连接丢失：" + responseObject.errorMessage); 
      } 
    }

    // 收到消息时的回调
    function onMessageArrived(message) { 
      console.log("📩 收到MQTT消息：" + message.payloadString); 
    }

    // 创建MQTT客户端实例，给客户端ID加随机数避免重复
    const client = new Paho.MQTT.Client('iot.eclipse.org', 443, 'react-native-mqtt-test-' + Math.random());
    
    // 绑定回调函数
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // 发起连接，启用SSL
    client.connect({ 
      onSuccess: onConnect, 
      useSSL: true
      // 如果你的MQTT服务器需要用户名密码，取消下面注释并填写：
      // userName: 'your-username',
      // password: 'your-password'
    });

    // 组件卸载时断开MQTT连接，避免内存泄漏
    return () => {
      if (client.isConnected()) {
        client.disconnect();
        console.log("🔌 已断开MQTT连接");
      }
    };
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>测试MQTT连接，请查看控制台日志</Text>
    </View>
  );
}

这段代码的几个关键要点： #

• 用useEffect钩子确保MQTT连接逻辑只在组件挂载时执行一次
• 给客户端ID添加了随机数，避免同一ID重复连接导致的冲突
• 增加了组件卸载时的断开连接逻辑，防止内存泄漏
• 页面上显示提示文字，引导你去查看控制台的日志输出

运行这个App后，你可以打开React Native的调试控制台（按Ctrl+M或Cmd+M调出调试菜单，选择Debug JS Remotely），就能看到连接成功、消息到达等日志了。

内容的提问来源于stack exchange，提问作者Jose Guilherme