强制 React-Native webview 加载 url 作为移动设备?
Force React-Native webview to load url as Mobile?
在 java 和 android studio 中,我通过添加以下代码实现了这一点:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
但我不知道如何在 React-Native 中执行此操作,我尝试了一些 css 样式但没有成功。
这是我在 React 中的 webview:
<WebView
ref="WebView"
scalesPageToFit={true}
onLoadStart={this.onLoadStart}
onLoadEnd={this.onLoadEnd}
source = {{ uri:this.props.navigation.getParam('main_url',
'https://xxxx.xxx/')}}
style={{backgroundColor: 'transparent',width: '100%'}}
/>:null}
受 Sanyam 评论的启发,您需要设置用户代理以使其加载为移动设备:
<WebView
userAgent={DeviceInfo.getUserAgent() + " - MYAPPNAME - android "}
{...otherProps}
/>
使用用户代理。
注意:这过去只适用于 Android。对于 iOS,您可以使用此 link
现在它似乎适用于 iOS 和 android
<Webview
userAgent="Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3714.0 Mobile Safari/537.36"
/>
在 java 和 android studio 中,我通过添加以下代码实现了这一点:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
但我不知道如何在 React-Native 中执行此操作,我尝试了一些 css 样式但没有成功。
这是我在 React 中的 webview:
<WebView
ref="WebView"
scalesPageToFit={true}
onLoadStart={this.onLoadStart}
onLoadEnd={this.onLoadEnd}
source = {{ uri:this.props.navigation.getParam('main_url',
'https://xxxx.xxx/')}}
style={{backgroundColor: 'transparent',width: '100%'}}
/>:null}
受 Sanyam 评论的启发,您需要设置用户代理以使其加载为移动设备:
<WebView
userAgent={DeviceInfo.getUserAgent() + " - MYAPPNAME - android "}
{...otherProps}
/>
使用用户代理。
注意:这过去只适用于 Android。对于 iOS,您可以使用此 link
<Webview
userAgent="Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3714.0 Mobile Safari/537.36"
/>