这有点难以描述。我正在使用 react nativeWebView组件来制作迷你浏览器。它工作正常，但底部有一个奇怪的黑色边框，我没有放入。它在滚动到或超出网页底部时出现。
您可以在下面的“blah”文本上方看到细黑线。底部的废话文本和粉红色部分的原因是为了排除borderBottom*WebView 或其容器上的杂散样式。
另外需要注意的是，重新加载页面时边框会短暂消失，因此它似乎在 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"
}
}