一般react-native加载webview的时候,会自己写一个导航头,然后内容在加载html的内容,这种情况下是没有任何问题的,还有一种情况,就是整个页面直接加载html,导航头也是html写的,然后直接做事件跳转就可以了,但是这样就有一个问题,在ios手机运行的时候,上方的状态栏被隔离出来了,效果如下:
解决这种问题,可以直接在HTML的页面进行修改
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
然后样式上:
header{padding-top:20px;}
如果安卓上高度太高,可以选择不要这个样式,自己做判断。
如果想查看更多,可以查看下面这篇文章:
转载至:
https://objcer.com/2017/09/21/Understanding-the-WebView-Viewport-in-iOS-11-iPhone-X/