我可以在视图中使用WebView吗（react native）？

我试图在视图组件内部使用WebView组件，用于我正在处理的react本机应用程序。当我将WebView嵌入到视图中时，我看不到我在WebView中显示的内容。这是react native的预期行为吗？

您应该为Web视图指定宽度和高度。 按以下步骤操作：

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

render（）{
返回(
);}

可以使用类似的方法

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>
 );
}

render（）{
让{url}=this.props.webDetail；
返回(
{this.renderSpinner（）}
);
}

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

例如-

---

尝试打开pdf文件。 Li'l开箱即用，但我相信这会对某人有所帮助：）

{
Platform.OS==“android”？
:
}

请使用以下代码：

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
    }
});

从“React”导入React；
从“react native”导入{View，ImageBackground，StyleSheet}；
从“react native WebView”导入{WebView}；
导出默认类WebViewScreen扩展React.Component{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
justifyContent:“flex start”，
对齐项目：“拉伸”，
},
登录Web视图：{
弹性：1，
玛金托普：30，
marginBottom:20
}
});

这个代码对我来说绝对有效

在上述所有解决方案中，我发现每个人都建议在webView样式中添加flex:1

是的，这是正确的，但如果您想在视图内部嵌套WebView，则需要精确指定父视图的样式。

因此，我设置了justifyContent:'flex start'，这样垂直WebView将从屏幕顶部开始，而alignItems:'stretch'这样WebView将在水平方向上获取所有可用内容

我们使用justifyContent指定主轴对齐，使用alignItems指定次轴对齐，默认flexDirection为column。

要获取有关如何安装react native webview的更多信息，请参阅以下链接：

---

对于视图中的WebView，我们可以将此代码用于React native中的.js和.tsx文件

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>
   );
  }
}

import React，{Component}来自'React'；
从“react native”导入{View}；
从“react native WebView”导入{WebView}；
导出默认类WebViewExample扩展组件{
render（）{
返回(
);
}
}

通常情况下，应显示网络视图。尝试将视图和WebView的flex设置为1，或者设置显式大小。您可以将示例代码放在rnplay.org上吗？应该可以。将所有父视图和Webview设置为flex:1谢谢！我尝试了flex:1方法。成功了！也许Nico或@abeikverdi应该将您的评论作为答案发布，这样用户4122421就可以接受了。答案太棒了。为什么？我的5美分。我一直在尝试在我的应用程序中使用容器的常规样式。但我的容器样式包括

alignItems

属性，据我所知，该属性不适合WebView。当我使用

flex:1

切换到简单样式时，出现了WebView。@DarthEgregious不知道背后的确切原因，但是，这是WebView的一个限制，因为它需要一个具有flex 1的视图。@VladimirVlasov是的。这种情况经常发生。WebView通常在属性方面有很多限制。你能给你的代码添加一些解释以便其他人可以从中学习吗？

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
    }
});

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>
   );
  }
}