WebView React Native中显示的iFrame边框

Question

尝试将youtube视频动态添加到我的React Native应用中时，我选择使用WebView和iFrame的组合，因为当前的react-native-youtube组件不适用于RN 16 ^。最终，该解决方案确实可行，但是iframe边框仍然显示并且不会消失（即使使用css或frameborder = 0），也无法使用css更改其颜色。有任何想法吗？这是我的代码：

视频预览组件（用户可以在点击之前看到视频，标题等）：

module.exports = React.createClass({
  render: function() {
      return (
        <TouchableHighlight 
          style={styles.touchCard}
          underlayColor={'transparent'}
          onPress={this.props.onPress} >
           <View style={styles.card}>
            <WebView
                style={styles.videoPreview}
                automaticallyAdjustContentInsets={true}
                scrollEnabled={false}
                style={styles.videoPreview}
                html={this.props.source}
                renderLoading={this.renderLoading}
                renderError={this.renderError}
                automaticallyAdjustContentInsets={false} />
              <View style={[styles.container, this.border('organge')]}>
                  <View style={[styles.header, this.border('blue')]}>
                      <Text style={[styles.previewText]}>{this.props.text}</Text>
                  </View>
                  <View style={[styles.footer, this.border('white')]}>
                    <View style={styles.sourceRow}>
                      <View style={[this.border('white')]}>
                        <ImageButton
                            style={[styles.logoBtn, , this.border('red'), styles.row]}
                            resizeMode={'contain'}
                            onPress={this.onHeartPress}
                            source={this.props.src} />
                      </View>
                      <View style={[this.border('white')]}>
                          <Text style={[styles.rowText, {fontWeight: 'bold'}]}>{this.props.entryBrand}</Text>
                          <Text style={[styles.rowText]}>{this.props.views}</Text>
                      </View>
                    </View>
                    <View style={[styles.heartRow, this.border('black')]}>
                      <KeywordBox 
                          style={[styles.category, this.border('blue')]}
                          key={this.props.key} 
                          text={this.props.category} 
                          onPress={this.props.categoryPress}
                          selected={this.props.selected} />
                    </View>
                  </View>
              </View>
            </View>
        </TouchableHighlight>
      );

看起来像这样：

然后，将iframe html输入到Webview中，如下所示：

<iframe style='border: 0;border-width: 0px;' scrolling='no' frameborder='0' width='320' height='300' src='https://www.youtube.com/embed/2B_QP9JGD7Q'></iframe>

这是我的样式：

var styles = StyleSheet.create({
  centerText: {
    marginBottom:5,
    textAlign: 'center',
  },
  noResultsText: {
    marginTop: 70,
    marginBottom:0,
    color: '#000000',
  },
  sourceRow: {
    justifyContent: 'space-around', 
    flexDirection: 'row', 
  }, 
  rowText: {
    textAlign: 'left',
    color: 'white', 
    fontSize: 12, 
    marginLeft: 5, 
    fontFamily: 'SFCompactText-Medium'
  }, 
  detailText: {
    fontFamily: 'SFCompactText-Light',
    fontSize: 18,
    color: 'white', 
    textAlign: 'left', 
    marginTop: 2, 
    marginLeft: 5, 
  }, 
  touchCard: {
    margin: 3, 
    width: window.width*0.95, 
    shadowOffset: {width: 2, height: 2},
    shadowOpacity: 0.5,
    shadowRadius: 3,
    alignSelf:'center', 
  }, 
  card: {
    flex: 1, 
    width: window.width*0.98, 
    alignSelf:'center', 
  }, 
  heartText: {
    color: 'white', 
    fontSize: 12, 
    fontWeight: 'bold',
    alignSelf: 'center', 
    fontFamily: 'SFCompactText-Medium'
  }, 
  heartRow: {
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignSelf: 'center', 
    justifyContent: 'center', 
  }, 
  logoBtn: {
    height: window.width/10, 
    width: window.width/10, 
    alignSelf:'center', 
  }, 
  heartBtn: {
    height: (92/97)*(window.width/13), 
    width: window.width/13, 
    alignSelf:'center', 
  }, 
  category: {
    fontFamily: 'Bebas Neue', 
    fontSize: 10,
    fontWeight: 'bold'
  }, 
  header: {
    flex: 1, 
    justifyContent: 'space-around', 
    marginTop: window.height/60, 
  }, 
  footer: {
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    margin: window.height/80, 
  }, 
  container: {
    flex: 1, 
    backgroundColor: '#1a1a1a', 
  }, 
  videoPreview: {
    flex: 2, 
    height: window.width*0.85, 
    width:window.width*0.98, 
    flexDirection: 'column'
  }, 
  previewText: {
    fontFamily: 'Bebas Neue', 
    fontSize: 23,
    color: 'white', 
    textAlign: 'left', 
    marginTop: 2, 
    marginLeft: 5, 
  }, 

});

Answer 1

我发现这是因为body元素默认的边距是8px。

<iframe>我通过将我的包装成<body>这样解决了这个问题：

<WebView
    source={{
               html: `<body style="margin: 0;">
                          <iframe
                               style="border-width: 0;"
                               width='100%'
                               height='100%'
                               src='${pageUrl}' />
                      </body>`
           }}
/>

的body样式删除了不需要的 8px 间距，并且 的iframe样式删除了自身周围的边框。现在 iframe 周围似乎没有任何空格。

我最初在这里发布了解决方案。