React Native WebView 在底部呈现意外的边框

Question

这描述起来有点棘手。我正在使用 react native 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"
  }
}

Answer 1

设置WebView的backgroundColor为透明，"border"不会被渲染

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

React Native WebView 在底部呈现意外的边框

React Native WebView rendering unexpected border at bottom

ios

reactjs

react-native

react-native-ios