React Native中基于IP发送TCP十六进制数据包失败问题排查

一、优先解决按钮触发问题（sendPacket未执行） #

如果console.log("sendPacket called")从未打印，说明按钮onPress未被触发，核心原因是可点击区域不足或样式缺失：

• 给TouchableOpacity添加明确样式，确保有足够的可点击区域：

import React from "react";
import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import TcpSocket from "react-native-tcp";
import { Buffer } from "buffer";

const sendPacket = () => {
  console.log("sendPacket called");
  try {
    // 后续修复代码见下文
  } catch (error) {
    console.log(error);
  }
};

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.buttonWrapper}>
        <TouchableOpacity onPress={sendPacket} style={styles.button}>
          <Text style={styles.buttonText}>Send Packet</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  buttonWrapper: {
    width: "80%",
  },
  button: {
    padding: 15,
    backgroundColor: "#1E90FF",
    borderRadius: 8,
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 18,
    fontWeight: "500",
  },
});

export default App;

• 若仍未触发，尝试改用箭头函数绑定onPress：

<TouchableOpacity onPress={() => sendPacket()} style={styles.button}>

二、修复sendPacket函数的逻辑错误 #

即使按钮触发，原函数也存在多处问题导致功能失效：

1. 修正Buffer.from的参数格式 #

原代码中Buffer.from的字符串完全不符合hex编码要求：

• 去掉0x前缀、逗号和空格，直接传入连续的十六进制字符
• 按照你补充的VISCA指令格式，示例平移速度0x01、倾斜速度0x01的数据包应为：

// 对应指令：81 01 06 01 01 01 01 03 FF
const packet = Buffer.from("8101060101010103FF", "hex");

2. 替换为实际摄像机IP地址 #

将host: "Ipaddr"改为摄像机的真实IP，例如：

const client = TcpSocket.createConnection({
  port: 5678, // VISCA over IP默认端口通常为5678，需匹配摄像机设置
  host: "192.168.1.100", // 替换为你的摄像机IP
});

3. 添加连接状态监听与错误处理 #

原代码未等待连接建立就发送数据，且无错误反馈，需补充事件监听：

const sendPacket = () => {
  console.log("sendPacket called");
  try {
    // 构造VISCA指令数据包（示例平移速度0x01，倾斜速度0x01）
    const packet = Buffer.from("8101060101010103FF", "hex");
    const client = TcpSocket.createConnection({
      port: 5678,
      host: "192.168.1.100",
    });

    // 连接成功后发送数据
    client.on("connect", () => {
      console.log("已连接到摄像机");
      client.write(packet, (err) => {
        if (err) {
          console.log("发送数据失败：", err);
        } else {
          console.log("指令已发送");
          // 发送完成后关闭连接（根据VISCA协议需求决定是否保持连接）
          client.end();
        }
      });
    });

    // 监听连接错误
    client.on("error", (error) => {
      console.log("连接错误：", error);
      client.destroy();
    });

    // 监听连接关闭
    client.on("close", () => {
      console.log("连接已关闭");
    });
  } catch (error) {
    console.log("函数执行错误：", error);
  }
};

三、VISCA协议注意事项 #

• 平移速度VV范围是0x01到0x18，倾斜速度WW范围是0x01到0x14，替换数据包中对应位置的十六进制值即可
• 部分VISCA over IP设备要求数据包添加长度字段（格式为0x01 + 长度字节 + 指令 + 0xFF），若上述代码无效，可尝试构造包含长度的数据包：

  // 指令长度（不含开头0x01和结尾0xFF）为9字节，所以长度字段是0x09
  const packet = Buffer.from("01098101060101010103FF", "hex");
  

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