4
這是一個有點棘手的描述。我正在使用反應本機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"
}
}
一直拖着我的頭髮出來。你先生,救了人命!非常感謝你哦! – ragamufin
這不適合我。 – Aspen