Question

我正在尝试在View组件中使用WebView Component，用于我正在处理的反应本机应用程序。当我在View中嵌入WebView时，我没有看到我在WebView中显示的内容。这是本地反应的预期行为吗？

Answer 1

您应该为webview指定宽度和高度。这样做：

render() {
return (
  <WebView
    source={{uri: 'https://github.com/facebook/react-native'}}
    style={{flex: 1}} // OR style={{height: 100, width: 100}}
  />
);}

Answer 2

当它嵌套在View组件中时，您需要将view和webview flex都设置为1.

例如。 -

<View style={{flex:1}}>
    <WebView
      source={{ uri: url }}
      style={{flex:1}}
      />
</View>

Answer 3

可以使用类似的东西

render() {
let {url} = this.props.webDetail;

return (
  <View style={styles.container}>
    {this.renderSpinner()}
    <WebView onLoad={this.onWebLoad.bind(this)}
      source={{ uri: url }}
      scalesPageToFit={true}
      />
  </View>
 );
}

Answer 4

尝试此操作以打开pdf文件。 Li'l开箱即用，但我相信它会帮助某人:)

{
    Platform.OS === "android" ? 
        <WebView  
            source={{uri:'http://docs.google.com/gview?embedded=true&url=https://your PDF Link'}}
            style={{flex: 1}}
        />
        :
        <WebView
            source={{uri:'https:your PDF Link'}}
            style={{flex: 1}}
        />
}

Answer 5

请使用以下代码：

import React from 'react';
import {View, ImageBackground, StyleSheet} from 'react-native';
import { WebView } from 'react-native-webview';

export default class WebViewScreen extends React.Component {
    render(){
        return(
            <View style={styles.container}>
                <WebView 
                    source= {{uri: 'https://www.google.com'}}
                    style= {styles.loginWebView}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'stretch',
    },
    loginWebView: {
        flex: 1,
        marginTop: 30,
        marginBottom: 20
    }
});

此代码对我来说绝对正常，

在以上所有解决方案中，我观察到每个人都建议在您的webView样式中添加 flex：1 。

是的，但是如果要在View中嵌套WebView，然后您需要精确指定父视图的样式。

因此，我设置了 justifyContent：'flex-start'，以便垂直地从屏幕顶部开始WebView，并 alignItems：'stretch'，以便使WebView全部在水平方向可用

当我们使用justifyContent指定主轴对齐方式和alignItems指定辅助轴对齐方式时，默认的flexDirection为column。

要获取有关如何安装react-native-webview的更多信息，请参考以下链接： https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md

Answer 6

对于 View 中的 WebView ，我们可以将该代码用于 .js 和 .tsx 中的文件strong> React-native 。

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class WebViewExample extends Component {
 render() {
  return (
   <View style={{height:"100%" , width:"100%"}}>
     <WebView source={{ uri: 'https://facebook.github.io/react-native/' }}/>
   </View>
   );
  }
}

我可以在View中使用WebView（本机反应）吗？

6 个答案: