URL 不适合 React Native 中的移动屏幕

Question

Hello and good evening,你好，晚上好，

How do I fix this.我该如何解决。 I have written some code and I want to fit to a Webview in react native.我已经编写了一些代码，我想适应 Webview 反应原生。 It Loads fine, But it does not fit to screen.它加载得很好，但它不适合屏幕。 It Looks something like this看起来像这样

My Code is looking something like this我的代码看起来像这样

<!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>

And the react native Code is looking Like this:反应原生代码看起来像这样：

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,
    }
 })

testing with https://google.com on webview it is okay, but when I test with this URL it is not looking good. testing with https://google.com on webview it is okay, but when I test with this URL it is not looking good. What do I do?我该怎么办？

Answer 1

So here is what I did to fix it.所以这就是我所做的修复它。

I changed few things in my code.我在我的代码中改变了一些东西。 So incase to help someone in future.因此，以防将来帮助某人。

<!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>

URL 不适合 React Native 中的移动屏幕

问题描述

1 个解决方案

解决方案1
1 2021-02-06 18:29:48

URL 不适合 React Native 中的移动屏幕

问题描述

1 个解决方案

解决方案1 1 2021-02-06 18:29:48

解决方案1
1 2021-02-06 18:29:48