ios – React Native WebView在底部渲染意外边框

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

您可以在下面的“blah”文本上方看到细黑线. 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"  }}

解决方法 将WebVIEw的backgroundcolor设置为透明,不会呈现“边框”.

<WebvIEw style={{backgroundcolor: 'transparent'}} .../>

总结

以上是内存溢出为你收集整理的ios – React Native WebView在底部渲染意外边框全部内容，希望文章能够帮你解决ios – React Native WebView在底部渲染意外边框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。