React Native中Trading View图表实现咨询：是否有专属库？

Trading View官方并未推出适配React Native的原生图表库，但你可以通过以下几种方式实现类似功能：

1. 用WebView嵌入Trading View网页组件 #

这是最直接的实现方式，借助React Native的react-native-webview库，将Trading View提供的网页版图表组件嵌入应用中：

• 实现步骤：
  • 从Trading View官网获取网页嵌入代码
  • 在项目中安装并引入react-native-webview
  • 将嵌入代码作为HTML内容传入WebView的source属性
• 示例代码：

import { WebView } from 'react-native-webview';

const TradingViewChart = () => {
  const chartHtml = `
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
    <div class="tradingview-widget-container">
      <div id="tradingview_chart"></div>
      <script type="text/javascript">
        new TradingView.widget({
          "width": "100%",
          "height": 600,
          "symbol": "NASDAQ:AAPL",
          "interval": "D",
          "theme": "dark",
          "style": "1",
          "locale": "zh_CN",
          "allow_symbol_change": true,
          "container_id": "tradingview_chart"
        });
      </script>
    </div>
  `;

  return <WebView source={{ html: chartHtml }} style={{ flex: 1 }} />;
};

export default TradingViewChart;

2. 用React Native原生图表库模拟Trading View风格 #

部分React Native图表库支持金融类图表（K线、蜡烛图等），可通过自定义配置贴近Trading View的样式：

• react-native-chart-kit：支持多种图表类型，可配置实现K线图
• victory-native：基于Victory的React Native版本，适合定制化金融图表开发
• react-native-svg-charts：采用SVG渲染，性能优异，可灵活搭建蜡烛图、分时图

3. 封装Web组件为原生模块（进阶方案） #

若WebView的性能无法满足需求，可将Trading View网页组件封装为React Native原生模块——Android端基于系统WebView、iOS端基于WKWebView，以此更精细地控制交互逻辑与性能表现。

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