React Native 中 URL 不适合移动屏幕

Question

你好，晚上好，

我该如何解决这个问题。我已经编写了一些代码，我想适合 React Native 中的 Webview。它加载正常，但不适合屏幕。看起来像这样

我的代码看起来像这样

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
    <select onChange="LoadChart();" id="pairs">
    <option value="BTCUSDT">BTCUSDT</option>
    <option value="ETHUSDT">ETHUSDT</option>
    </select>
    <br>
    <div class="tradingview-widget-container" id="tvchart"></div>
</body>
<script>
LoadChart();

    function LoadChart(){
    let symbol = document.getElementById('pairs').value;
      new TradingView.widget(
  {
  "width": 1300,
  "height": 610,
  "symbol": "BINANCE:"+symbol,
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "Dark",
  "style": "1",
  "locale": "en",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tvchart"
}
  );
    
    }
</script>
</html>

反应本机代码看起来像这样：

import React, { Component } from 'react';
import { View, StyleSheet , Text , Dimensions} from 'react-native';
import { WebView } from 'react-native-webview';

export default class ShowWebView extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
        <View style = {styles.container}>
        <WebView
        source = {{ uri:
        'URL for chart here' }}
        />
     </View>
    );
  }
}


const styles = StyleSheet.create({
    container: {
       height: Dimensions.get("window").height,
       width: Dimensions.get("window").width,
    }
 })

在 webview 上使用 https://google.com 进行测试是可以的，但是当我使用这个 URL 进行测试时，它看起来不太好。我该怎么办？

Answer 1

这就是我修复它的方法。

我更改了代码中的一些内容。所以以防将来帮助别人。

<!doctype html>
<html>
  <head>


    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

  </head>
  <body>
    <select onChange="LoadChart();" id="pairs">
    <option value="BTCUSDT">BTCUSDT</option>
    <option value="ETHUSDT">ETHUSDT</option>
    </select>
    <br>
    <div class="tradingview-widget-container" id="tvchart" style="width:auto;height:auto;max-height:100%;max-width:100%;max-device-width:100%;max-device-height:100%"></div>
  </body>
  <script>
  LoadChart();

    function LoadChart(){
    let symbol = document.getElementById('pairs').value;
      new TradingView.widget(
    {
    "width": screen.width,
    "height": screen.height,
    "symbol": "BINANCE:"+symbol,
    "interval": "D",
    "timezone": "Etc/UTC",
    "theme": "Dark",
    "style": "1",
    "locale": "en",
    "toolbar_bg": "#f1f3f6",
    "enable_publishing": false,
    "allow_symbol_change": true,
    "container_id": "tvchart"
  }
    );
    
    }
  </script>
</html>

Answer 2

0
投票

谢谢你，它刚刚帮助了我。

React Native 中 URL 不适合移动屏幕

问题描述投票：0回答：2

2个回答

最新问题

React Native 中 URL 不适合移动屏幕

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2