react native里在ios平台引用webview时由于平台差异无故出现黑边解决方案

最新推荐文章于 2024-05-07 14:30:47 发布

clf_programing

最新推荐文章于 2024-05-07 14:30:47 发布

阅读量1.1k

点赞数

分类专栏： react native 文章标签： react native 平台差异

本文链接：https://blog.csdn.net/qq_33323251/article/details/79386304

版权

react native 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

react native里在ios平台引用webview时由于平台差异无故出现黑边解决方案

不久前在做有关引用webview的开发时，页面中在webview的下方无缘无故出现了黑边，而且每一次横竖屏切换时黑边还会加粗，自己在谷歌百度上面一通好找。。。。还是没有解决此问题的方法，只找到了ios开发中此问题的解决方案，奈何我没有做过ios的开发。。。看不懂啊。。内心崩溃，经过一番琢磨，终于找到了此问题在RN中的解决方案，上代码：

webView(){
    return(
        <View style={{flex:4,zIndex:-10,alignItems:'center',justifyContent:'center'}} onLayout={()=>{this.handleLayout()}}>
            <WebView
                style={{backgroundColor:'clearColor',opaque:'no',}}
                ref={(w) => { this.webview = w;StateInfoGlobal.webView = w }}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                scalesPageToFit={true}
                source={Platform.OS == 'ios' ? require('../../ios/assets/src/component/RemoteControl.html') : {uri: 'file:///android_asset/RemoteControl.html'}}>
            </WebView>
        </View>
    )
}

重要的一句是这句：

style={{backgroundColor:'clearColor',opaque:'no',}}

将WebView中的style属性里加入

backgroundColor:'clearColor',opaque:'no'

即可，此bug立即消散