android webview黑线,ios – React Native WebView在底部渲染意外边框

这有点难以描述.我正在使用react本机WebView组件来制作迷你浏览器.它工作正常,但它底部有一个奇怪的黑色边框,我没有放入.它在滚动到或超出网页底部时出现.

您可以在下面的“blah”文本上方看到细黑线. blah文本和底部粉红色部分的原因是在WebView或其容器上排除了一个迷路borderBottom *样式.

另外需要注意的是,重新加载页面时边框会短暂消失,因此它似乎在WebView的html中.但我不明白如何或为什么,因为a)它出现在所有网站上,b)它没有出现在其他iOS浏览器中.

我在这做什么奇怪的事吗？

截图：

元素和风格：

{this.addressbarButtonProps().map(props => React.createElement(Button,{ ...props,key: props.title }))}

ref={ADDRESSBAR_REF}

placeholder="type url"

style={{ minWidth: this.screenWidth - 50 * this.addressbarButtonProps().filter(b => !b.hidden).length - 10 }}

/>

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}

/>

blah

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"

}

}