反应本机WebView渲染底部的意外边框

问题描述：

这是一个有点棘手的描述。我正在使用反应本机WebView组件来制作迷你浏览器。它工作正常，但底部有一个奇怪的黑色边框，我没有放入。当滚动到或超出网页底部时出现。反应本机WebView渲染底部的意外边框

您可以在下方的“blah”文本上方看到细细的黑色线条。底部文字和粉色部分的原因是排除了WebView或其容器上的流行borderBottom*样式。

另一件需要注意的事情是，当重新加载页面时，边框短暂消失，所以它看起来在WebView的html中。但我不明白如何或为什么，因为a）它出现在所有网站上，b）它不会出现在其他iOS浏览器中。

我在这里做一些奇怪的事情吗？

截图：

元素和风格：

<View style={styles.container as any}> 
    <View style={styles.header as any}> 
     {this.addressbarButtonProps().map(props => React.createElement(Button, { ...props, key: props.title }))} 
     <TextInput 
     ref={ADDRESSBAR_REF} 
     placeholder="type url" 
     style={{ minWidth: this.screenWidth - 50 * this.addressbarButtonProps().filter(b => !b.hidden).length - 10 }} 
     /> 
    </View> 
    <WebView 
     ref={WEBVIEW_REF} 
     source={{uri: this.state.uri}} 
     style={{ ...styles.web, width: this.screenWidth, paddingBottom: 0, padding: 0 }} 
     scalesPageToFit={true} 
     allowsInlineMediaPlayback={true} 
     onMessage={m => this.onMessage(m.nativeEvent.data)} 
     injectedJavaScript={js} 
     startInLoadingState={true} 
    /> 
    <Text style={{ borderTopWidth:20, borderTopColor: "red" }}>blah</Text> 
    </View> 

const styles = { 
    container: { 
    paddingTop: 20, 
    flex: 1, 
    alignItems: "center", 
    justifyContent: "space-between", 
    backgroundColor: "#fafafa", 
    borderBottomColor: "pink", 
    borderBottomWidth: 100 
    }, 
    header: { 
    flexDirection: "row", 
    alignItems: "flex-start", 
    justifyContent: "flex-start", 
    alignSelf: "stretch" 
    }, 
    web: { 
    flex: 1, 
    borderBottomColor: "#fafafa", 
    backgroundColor: "#fafafa" 
    } 
}

答

设置web视图，以透明和 “边界” 的backgroundColor将不会被渲染。

<Webview style={{backgroundColor: 'transparent'}} .../>

一直拖着我的头发出来。你先生，救了人命！非常感谢你哦！ – ragamufin

这不适合我。 – Aspen

反应本机WebView渲染底部的意外边框

相关推荐