如何在React Native Expo中使用TradingView？

huangapple
go评论83阅读模式
英文:

How to use Trading view in react native Expo?

问题

我想使用React Native和Expo制作交易应用，但我不知道如何将TradingView集成到React Native应用中。

我尝试过其他图表库，但它们不如TradingView丰富，我也看到了TradingView的React Native示例，但它不是在Expo中，并且文档质量较差。

英文:

I want to make trading App with react native and expo, and I don't know how to integrate Trading view with react native app.

I did try other chart libraries, but they are not as rich as Trading view, and I saw Trading view react native example but it's not in expo and it has a poor documentation.

答案1

得分: 1

你可以在React Native Expo中使用WebView来使用TradingView图表。
运行：

  1. npx expo install react-native-webview

使用TradingView的HTML示例：

  1. const htmlContent = `
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <meta charset="utf-8" />
  6.     <meta name="viewport" content="width=device-width" />
  7.     <title>TradingView Chart</title>
  8.     <script src="https://s3.tradingview.com/tv.js"></script>
  9.     <style>
  10.     .tv-header__title {
  11.         font-size: 120px !important;
  12.     }
  13.     #tv_chart_container {
  14.         width: 100%;
  15.         height: 100%;
  16.         position: absolute;
  17.         top: 0;
  18.         left: 0;
  19.         font-size: 45px !important;
  20.       }
  21.     .tv-header__top-line {
  22.         height: 250px !important;
  23.     }
  24.   </style>
  25.   </head>
  26.   <body>
  27.     <div id="tv_chart_container"></div>
  28.     <script>
  29.       const tvChart = new TradingView.widget({
  30.         symbol: '${coinId}USD',
  31.         interval: '5',
  32.         timezone: 'Etc/UTC',
  33.         theme: 'dark',
  34.         width: '100%',
  35.         height: '99.5%',
  36.         style: '1',
  37.         theme: 'light',
  38.         save_image: false,
  39.         locale: 'en',
  40.         hide_side_toolbar: false,
  41.         toolbar_bg: '#f1f3f6',
  42.         container_id: 'tv_chart_container'
  43.       });
  44.       tvChart.onChartReady(function() {
  45.         tvChart.addCustomCSSFile('./tradingView.css')
  46.       })
  47.     </script>
  48.   </body>
  49. </html>
  50. `;

并在WebView标签中使用它：

  1. <WebView source={{ html: htmlContent }} />
英文:

You can use TradingView chart by webView in react native expo.
run:

  1. npx expo install react-native-webview

use TradingView html for example:

  1. const htmlContent = `
  2. &lt;!DOCTYPE html&gt;
  3. &lt;html&gt;
  4.   &lt;head&gt;
  5.     &lt;meta charset=&quot;utf-8&quot; /&gt;
  6.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
  7.     &lt;title&gt;TradingView Chart&lt;/title&gt;
  8.     &lt;script src=&quot;https://s3.tradingview.com/tv.js&quot;&gt;&lt;/script&gt;
  9.     &lt;style&gt;
  10.     .tv-header__title {
  11.         font-size: 120px !important;
  12.     }
  13.     #tv_chart_container {
  14.         width: 100%;
  15.         height: 100%;
  16.         position: absolute;
  17.         top: 0;
  18.         left: 0;
  19.         font-size: 45px !important;
  20.       }
  21.     .tv-header__top-line {
  22.         height: 250px !important;
  23.     }
  24.   &lt;/style&gt;
  25.   &lt;/head&gt;
  26.   &lt;body&gt;
  27.     &lt;div id=&quot;tv_chart_container&quot;&gt;&lt;/div&gt;
  28.     &lt;script&gt;
  29.       const tvChart = new TradingView.widget({
  30.         symbol: &#39;${coinId}USD&#39;,
  31.         interval: &#39;5&#39;,
  32.         timezone: &#39;Etc/UTC&#39;,
  33.         theme: &#39;dark&#39;,
  34.         width: &#39;100%&#39;,
  35.         height: &#39;99.5%&#39;,
  36.         style: &#39;1&#39;,
  37.         theme: &#39;light&#39;,
  38.         save_image: false,
  39.         locale: &#39;en&#39;,
  40.         hide_side_toolbar: false,
  41.         toolbar_bg: &#39;#f1f3f6&#39;,
  42.         container_id: &#39;tv_chart_container&#39;
  43.       });
  44.       tvChart.onChartReady(function() {
  45.         tvChart.addCustomCSSFile(&#39;./tradingView.css&#39;)
  46.       })
  47.     &lt;/script&gt;
  48.   &lt;/body&gt;
  49. &lt;/html&gt; `;

and use it in webView tag:

  1. &lt;WebView source={{ html: htmlContent }} /&gt;

huangapple
  • 本文由 发表于 2023年6月1日 14:46:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76379310.html
  • android
  • mobile
  • react-native
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定