如何在React Native Expo中集成Trading View？

方案一：用WebView加载TradingView Web Widget #

这是Expo环境下最省心的方案，不用碰原生配置，直接复用TradingView成熟的Web组件。

• 第一步：生成TradingView Web Widget代码
  去TradingView官网定制你需要的图表组件（比如高级K线图），复制对应的嵌入代码。

• 第二步：安装Expo WebView依赖
  执行命令：npx expo install expo-webview

• 第三步：编写组件代码
  示例如下：

  import { WebView } from 'expo-webview';
  import React from 'react';
  import { View, StyleSheet } from 'react-native';
  
  export default function TradingViewChart() {
    const chartHtml = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
        </head>
        <body style="margin:0;">
          <div class="tradingview-widget-container">
            <div id="tradingview_my-chart"></div>
            <script type="text/javascript">
              new TradingView.widget({
                "width": "100%",
                "height": "100%",
                "symbol": "BINANCE:BTCUSDT",
                "interval": "D",
                "timezone": "Etc/UTC",
                "theme": "dark",
                "style": "1",
                "locale": "en",
                "toolbar_bg": "#f1f3f6",
                "enable_publishing": false,
                "allow_symbol_change": true,
                "container_id": "tradingview_my-chart"
              });
            </script>
          </div>
        </body>
      </html>
    `;
  
    return (
      <View style={styles.container}>
        <WebView
          source={{ html: chartHtml }}
          style={styles.webview}
          javaScriptEnabled={true}
          domStorageEnabled={true}
        />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#000',
    },
    webview: {
      flex: 1,
    },
  });
  

  提示：把container_id换成你的唯一标识，调整symbol、theme、interval这些参数适配你的需求。

• 优点：完全兼容Expo，不用eject，可自定义的功能和Web版一致。

• 缺点：性能比原生组件稍差，部分移动端交互需要微调。

方案二：Expo Dev Client + TradingView原生模块 #

如果追求更流畅的原生体验，可以用Expo Dev Client来集成官方的TradingView React Native模块，不用完全eject项目。

• 第一步：搭建Expo Dev Client环境
  按照Expo官方文档初始化Dev Client，让项目支持自定义原生模块。
• 第二步：安装TradingView原生模块
  执行命令：npm install @tradingview/react-native-widget
• 第三步：编写组件代码
  示例如下：

  import React from 'react';
  import { View, StyleSheet } from 'react-native';
  import { AdvancedChart } from '@tradingview/react-native-widget';
  
  export default function TradingViewNativeChart() {
    return (
      <View style={styles.container}>
        <AdvancedChart
          symbol="BINANCE:BTCUSDT"
          interval="D"
          theme="dark"
          style={styles.chart}
        />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#000',
    },
    chart: {
      flex: 1,
    },
  });
  

• 优点：原生级性能，移动端交互更流畅。
• 缺点：需要依赖Expo Dev Client，打包调试流程比纯Expo项目复杂，模块文档不全，得自己测试参数。

额外提醒 #

• 部分高级功能需要TradingView付费账号权限，提前确认。
• WebView方案里，可以把tv.js脚本本地缓存，优化加载速度。
• 原生模块遇到问题时，去模块的GitHub仓库看Issue，社区有不少现成的解决方案。

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