关于ESP32 SPIFFS部署React Native实现无WiFi温感数据实时展示的技术咨询

一、React Native能否部署到ESP32的SPIFFS？ #

不行。React Native是原生移动端应用框架，编译后生成的是iOS/Android平台的二进制可执行文件，并非静态Web资源（HTML/CSS/JS）。ESP32的SPIFFS仅支持存储静态文件，无法运行原生APP代码。

你之前看到的React与ESP32结合的案例，指的是Web版React（即基于浏览器运行的React应用），将其编译后的静态资源打包部署到SPIFFS，作为ESP32 Web服务器的前端页面。如果要做移动端仪表盘，正确的方式是：React Native作为独立的移动端APP，通过网络连接ESP32的WebSocket服务，而非将RN部署到ESP32上。

二、无WiFi环境下通过WebSocket实现数据传输 #

无公共WiFi时，可让ESP32开启SoftAP模式（自建WiFi热点），让RN设备直接连接该热点，即可通过WebSocket通信，步骤如下：

• 在ESP32代码中配置SoftAP，设置热点名称（SSID）和密码
• 在ESP32中搭建WebSocket服务器（推荐使用AsyncWebSocket库）
• RN端先连接ESP32的热点，再通过WebSocket客户端连接ESP32的固定IP（通常为192.168.4.1）和指定端口

三、Web版React（静态资源）部署到SPIFFS的具体步骤 #

若想让ESP32直接提供可访问的仪表盘页面（无需单独RN APP），可将Web版React编译为静态资源部署到SPIFFS，步骤如下：

1. 创建并编译Web版React项目

   • 初始化React项目：npx create-react-app esp32-dashboard
   • 实现WebSocket实时接收温度数据的界面
   • 编译项目：npm run build，生成build目录下的静态文件（HTML/CSS/JS等）

2. 打包静态文件为SPIFFS镜像

   • Arduino环境：安装ESP32 SPIFFS上传插件，将build目录下的文件复制到项目根目录的data文件夹中
   • ESP-IDF环境：使用spiffsgen.py工具，根据分区表配置生成SPIFFS镜像文件

3. 上传SPIFFS镜像到ESP32

   • Arduino IDE：点击「工具」→「ESP32 Sketch Data Upload」，等待上传完成
   • ESP-IDF环境：执行命令idf.py flash spiffs完成上传

4. ESP32代码配置

   • 挂载SPIFFS：SPIFFS.begin(true)
   • 配置Web服务器，将根路径指向SPIFFS中的静态文件：server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html")
   • 实现WebSocket服务，定时推送温度传感器数据

四、RN APP连接ESP32 WebSocket的核心代码示例 #

ESP32端（Arduino环境） #

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncWebSocket.h>

const char* ap_ssid = "ESP32-Temp-AP";
const char* ap_password = "temp1234";

AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
float current_temp = 0.0;

// WebSocket事件处理
void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, 
               void *arg, uint8_t *data, size_t len) {
  if(type == WS_EVT_CONNECT) {
    Serial.printf("客户端 #%u 已连接\n", client->id());
  } else if(type == WS_EVT_DISCONNECT) {
    Serial.printf("客户端 #%u 已断开\n", client->id());
  }
}

void setup() {
  Serial.begin(115200);
  // 开启SoftAP
  WiFi.softAP(ap_ssid, ap_password);
  Serial.print("AP IP地址: ");
  Serial.println(WiFi.softAPIP());

  // 初始化WebSocket
  ws.onEvent(onWsEvent);
  server.addHandler(&ws);

  // 挂载SPIFFS静态页面（可选）
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

  server.begin();
}

void loop() {
  // 模拟读取温度传感器数据（替换为实际传感器代码）
  current_temp = random(20, 30) + (random(0, 100) / 100.0);
  // 向所有连接的客户端推送温度数据
  ws.textAll(String(current_temp));
  delay(1000);
}

RN端代码片段 #

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { WebSocket } from 'react-native-websocket';

const TempDashboard = () => {
  const [temperature, setTemperature] = useState('0.0');

  return (
    <View style={styles.container}>
      <Text style={styles.title}>ESP32温度仪表盘</Text>
      <Text style={styles.tempValue}>{temperature} °C</Text>
      <WebSocket
        url="ws://192.168.4.1/ws"
        onMessage={(event) => setTemperature(event.data)}
        onError={(err) => console.log('WebSocket错误:', err)}
        onOpen={() => console.log('已连接到ESP32')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    marginBottom: 30,
  },
  tempValue: {
    fontSize: 56,
    color: '#2196F3',
    fontWeight: 'bold',
  },
});

export default TempDashboard;

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