我想用React Native和Expo制作交易应用程序，但我不知道如何将交易视图与React Native应用程序集成。
我确实尝试过其他图表库，但它们不如交易视图丰富，而且我看到交易视图反应本机示例，但它不在世博会上，并且文档很差。
您可以在 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 }} />
这是一个完整的组件设置，可以帮助解决这个问题
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from 'react-native-webview';
const TradingViewChart = ({ coinId }) => {
const tradingViewWidgetHtml = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="tradingview_9e2e4"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": "100%",
"height": "100%",
"symbol": "${coinId}:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_9e2e4"
}
);
</script>
</body>
</html>
`;
return (
<View style={styles.container}>
<WebView
originWhitelist={['*']}
source={{ html: tradingViewWidgetHtml }}
style={{ flex: 1 }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default TradingViewChart;