如何在React Native中使用React库？能否调用react-plotly实现热力图？

直接在React Native中调用react-plotly方法无法直接运行，因为react-plotly依赖浏览器DOM/BOM环境，React Native本身没有web运行时，目前有3种成熟落地方案可实现heatmap能力，覆盖不同场景需求：

方案1：WebView承载原生Plotly.js（最推荐，稳定性最高） #

这个方案不存在功能裁剪，支持Plotly全量图表类型（包括heatmap、3D图表等所有官方能力），是生产环境用的最多的方案：

• 安装依赖：执行npm install react-native-webview安装官方维护的WebView组件，不要使用React Native旧版内置的WebView
• 编写本地HTML模板：新建一个静态HTML文件，引入本地存放的plotly.min.js文件（可从Plotly官方渠道下载后放到项目assets目录，实现完全离线可用），预留图表挂载的DOM节点
• RN侧加载HTML后，通过injectJavaScript方法注入执行Plotly渲染代码，heatmap的配置写法和web端完全一致，trace类型指定为heatmap即可
• 交互支持：如果需要捕获图表点击、hover事件，可以在HTML里监听Plotly事件，通过postMessage把事件数据传回RN侧

核心代码参考：

// PlotlyHeatmap.js
import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const PlotlyHeatmap = () => {
  const webviewRef = useRef(null);
  // 热力图配置和web端Plotly写法完全一致
  const heatmapConfig = [{
    z: [[1, 20, 30, 50], [20, 1, 60, 80], [30, 60, 1, 90], [50, 80, 90, 1]],
    type: 'heatmap',
    colorscale: 'Viridis'
  }];
  const layout = {
    title: '数据热力图',
    width: 350,
    height: 350
  };

  const renderChart = () => {
    const runCode = `
      Plotly.react('plotly-container', ${JSON.stringify(heatmapConfig)}, ${JSON.stringify(layout)});
      true;
    `;
    webviewRef.current.injectJavaScript(runCode);
  };

  return (
    <WebView
      ref={webviewRef}
      originWhitelist={['*']}
      source={require('./plotly-template.html')}
      onLoadEnd={renderChart}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
};

export default PlotlyHeatmap;

<!-- plotly-template.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="./plotly.min.js"></script>
  <style>
    * {margin:0;padding:0;}
    html, body, #plotly-container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="plotly-container"></div>
</body>
</html>

方案2：通过react-native-web兼容层直接运行react-plotly #

如果已有大量web端react-plotly业务代码需要复用，可以用这个方案减少重复开发：

• 安装依赖：npm install react-native-web react-plotly.js plotly.js
• 调整Metro打包配置，添加react-native-web的路径别名，让打包时把React DOM相关依赖映射到react-native-web的对应实现
• 直接按web端写法引入react-plotly组件，传入type为heatmap的trace配置即可
• 注意：这个方案多了一层web到RN的渲染桥接，性能比纯WebView方案差15%-30%，配置复杂度更高，不适合从零开发的场景

方案3：使用全功能Plotly RN封装库 #

社区有持续维护的Plotly RN封装，本质是对上述WebView方案的封装，已经提前处理好消息通信、布局适配、离线资源内置的逻辑：

• 安装对应依赖后，不需要自己写HTML模板，直接传入Plotly的data、layout配置即可
• 所有Plotly图表类型都原生支持，heatmap不需要额外配置，直接在trace里指定type即可
• 选型时注意选最近6个月有提交、Issue响应及时的库，避免选停更的低星包

避坑提示：不要尝试直接在RN代码里import react-plotly.js，react-plotly强依赖window、document等浏览器API，直接引入会直接报环境变量不存在的错误，必须依托Web容器或者web兼容层运行。

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