React native URL不适合React native中的移动屏幕_React Native_Webview

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

react-native webview

React native URL不适合React native中的移动屏幕,react-native,webview,React Native,Webview,你好，晚上好我该如何解决这个问题。我已经写了一些代码，我想适应react native中的Webview。它可以正常加载，但不适合屏幕。看起来像这样 <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> &l

你好，晚上好

我该如何解决这个问题。我已经写了一些代码，我想适应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>

我的代码看起来像这样

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


BTCUSDT
ETHUSDT


负荷图（）；
函数负载图（）{
让symbol=document.getElementById（'pairs'）.value；
新TradingView.widget(
{
“宽度”：1300，
“高度”：610，
“符号”：“二进制：”+符号，
“间隔”：“D”，
“时区”：“Etc/UTC”，
“主题”：“黑暗”，
“风格”：“1”，
“locale”：“en”，
“工具栏背景”：“#f1f3f6”，
“启用发布”：false，
“允许符号更改”：true，
“容器id”：“tvchart”
}
);
}

react本机代码如下所示：

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

import React，{Component}来自'React'；
从“react native”导入{视图、样式表、文本、维度}；
从“react native WebView”导入{WebView}；
导出默认类ShowWebView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
高度：尺寸。获取（“窗口”）。高度，
宽度：尺寸。获取（“窗口”）。宽度，
}
})

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

下面是我修复它的方法

我在代码中只做了几处更改。所以为了将来帮助别人

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


BTCUSDT
ETHUSDT


负荷图（）；
函数负载图（）{
让symbol=document.getElementById（'pairs'）.value；
新TradingView.widget(
{
“宽度”：屏幕宽度，
“高度”：屏幕高度，
“符号”：“二进制：”+符号，
“间隔”：“D”，
“时区”：“Etc/UTC”，
“主题”：“黑暗”，
“风格”：“1”，
“locale”：“en”，
“工具栏背景”：“#f1f3f6”，
“启用发布”：false，
“允许符号更改”：true，
“容器id”：“tvchart”
}
);
}