将React Native中的WebView限制为页面的某些部分

时间:2016-01-06 02:43:36

标签: webview youtube react-native

我试图限制youtube网址的webview只显示视频(而不是youtube页面的其余部分)。你怎么做到这一点?我已经找到了webview的一些道具,但希望对以下道具有更深入的了解:

automaticallyAdjustContentInsets bool 

contentInset {top: number, left: number, bottom: number, right: number} 

这是我到目前为止所做的:

enter image description here

当然,我不想看到youtube搜索标签 - 并且想要更改webview的尺寸来执行此操作。怎么能做得更好?以下是每个视频“卡片”的自定义组件的代码:

<TouchableHighlight 
          style={styles.touchCard}
          underlayColor={'transparent'}
          onPress={this.props.onPress} >
           <View style={styles.card}>
            <WebView
                scrollEnabled={false}
                style={styles.videoPreview}
                url={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.postTime}</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>

0 个答案:

没有答案