React网页能否与React Native应用对接？数据交互方案咨询

1. RESTful API异步通信（最通用） #

通过后端服务做中间层，实现数据的存储与获取：

• React网页处理完数据后，调用后端的POST/PUT接口把数据存到数据库（比如MongoDB、MySQL）
• React Native应用通过后端的GET接口主动请求或轮询获取处理后的结果
• 代码片段参考：
  React网页端提交数据：

  const sendProcessedData = async (processedData) => {
    try {
      await fetch('/api/save-processed-data', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(processedData),
      });
    } catch (error) {
      console.error('提交数据失败:', error);
    }
  };
  

  React Native端获取数据：

  const fetchProcessedData = async () => {
    try {
      const response = await fetch('/api/get-processed-data');
      const data = await response.json();
      // 这里处理拿到的结果
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  };
  

2. WebSocket实时推送（适合实时同步场景） #

如果需要数据处理完成后立刻通知React Native应用，用WebSocket做实时通信：

• 后端搭建WebSocket服务（比如用Node.js的ws库）
• React网页处理完数据后，通过WebSocket把消息发给后端，后端再推送给在线的React Native客户端
• 代码片段参考：
  React网页端发送消息：

  const socket = new WebSocket('ws://你的后端地址');
  socket.onopen = () => {
    socket.send(JSON.stringify({ type: 'data-processed', data: processedData }));
  };
  

  React Native端接收消息：

  import { WebSocket } from 'react-native';
  
  const socket = new WebSocket('ws://你的后端地址');
  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    if (message.type === 'data-processed') {
      // 处理收到的结果
    }
  };
  

3. Deep Linking传递数据（适合小体量数据） #

如果数据量不大，可以直接通过Deep Link让网页唤起App并传数据：

• 先给React Native应用配置Deep Link（比如myapp://processed-data）
• React网页处理完数据后，生成带参数的Deep Link，引导用户点击跳转
• 代码片段参考：
  React网页端生成链接：

  <a href="myapp://processed-data?data=${encodeURIComponent(JSON.stringify(processedData))}">
    打开应用查看结果
  </a>
  

  React Native端处理Deep Link：

  import { Linking } from 'react-native';
  
  // 监听Deep Link跳转事件
  Linking.addEventListener('url', (event) => {
    const url = event.url;
    const params = new URLSearchParams(url.split('?')[1]);
    const processedData = JSON.parse(decodeURIComponent(params.get('data')));
    // 处理拿到的数据
  });
  
  // 应用启动时检查是否通过Deep Link打开
  Linking.getInitialURL().then((url) => {
    if (url) {
      // 复用上面的处理逻辑
    }
  });
  

4. 云存储中转（比如Firebase实时数据库） #

借助第三方云服务实现数据同步，不用自己搭后端：

• React网页处理完数据后，写入Firebase实时数据库
• React Native应用监听对应数据库节点的变化，实时获取更新
• 代码片段参考：
  React网页端写入数据：

  import { getDatabase, ref, set } from "firebase/database";
  
  const db = getDatabase();
  set(ref(db, 'processed-data/用户ID'), processedData)
    .then(() => console.log('数据写入成功'))
    .catch((error) => console.error('写入失败:', error));
  

  React Native端监听数据：

  import { getDatabase, ref, onValue } from "firebase/database";
  
  const db = getDatabase();
  const dataRef = ref(db, 'processed-data/用户ID');
  onValue(dataRef, (snapshot) => {
    const processedData = snapshot.val();
    if (processedData) {
      // 处理拿到的结果
    }
  });
  

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