反應本機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" 
    } 
}

來源

2016-12-16 user1002973

設置web視圖，以透明和「邊界」的backgroundColor將不會被渲染。

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

來源

2017-02-15 08:48:50

一直拖着我的頭髮出來。你先生，救了人命！非常感謝你哦！ – ragamufin

這不適合我。 – Aspen

反應本機WebView渲染底部的意外邊框

回答

相關問題