英文:
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图表。
运行：
npx expo install react-native-webview
使用TradingView的HTML示例：
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>TradingView Chart</title>
<script src="https://s3.tradingview.com/tv.js"></script>
<style>
.tv-header__title {
font-size: 120px !important;
}
#tv_chart_container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 45px !important;
}
.tv-header__top-line {
height: 250px !important;
}
</style>
</head>
<body>
<div id="tv_chart_container"></div>
<script>
const tvChart = new TradingView.widget({
symbol: '${coinId}USD',
interval: '5',
timezone: 'Etc/UTC',
theme: 'dark',
width: '100%',
height: '99.5%',
style: '1',
theme: 'light',
save_image: false,
locale: 'en',
hide_side_toolbar: false,
toolbar_bg: '#f1f3f6',
container_id: 'tv_chart_container'
});
tvChart.onChartReady(function() {
tvChart.addCustomCSSFile('./tradingView.css')
})
</script>
</body>
</html>
`;
并在WebView标签中使用它：
<WebView source={{ html: htmlContent }} />
英文:
You can use TradingView chart by webView in react native expo.
run:
npx expo install react-native-webview
use TradingView html for example:
const htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>TradingView Chart</title>
<script src="https://s3.tradingview.com/tv.js"></script>
<style>
.tv-header__title {
font-size: 120px !important;
}
#tv_chart_container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 45px !important;
}
.tv-header__top-line {
height: 250px !important;
}
</style>
</head>
<body>
<div id="tv_chart_container"></div>
<script>
const tvChart = new TradingView.widget({
symbol: '${coinId}USD',
interval: '5',
timezone: 'Etc/UTC',
theme: 'dark',
width: '100%',
height: '99.5%',
style: '1',
theme: 'light',
save_image: false,
locale: 'en',
hide_side_toolbar: false,
toolbar_bg: '#f1f3f6',
container_id: 'tv_chart_container'
});
tvChart.onChartReady(function() {
tvChart.addCustomCSSFile('./tradingView.css')
})
</script>
</body>
</html> `;
and use it in webView tag:
<WebView source={{ html: htmlContent }} />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论