我可以在一个视图(react native)中使用WebView吗？
我可以在一个视图(react native)中使用WebView吗？
提问于 2016-08-16 05:05:09
我正在尝试使用视图组件中的WebView组件，用于我正在工作的react原生应用程序。当我在视图中嵌入WebView时，我看不到在WebView中显示的内容。这是react原生的预期行为吗？
回答 6
Stack Overflow用户
发布于 2016-09-07 15:21:26
您应该指定for视图的宽度和高度。如下所示：
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{flex: 1}} // OR style={{height: 100, width: 100}}
/>
);}Stack Overflow用户
发布于 2017-09-28 13:31:16
当它嵌套在View组件中时，需要将view和webview flex都设置为1。
例如：-
<View style={{flex:1}}>
<WebView
source={{ uri: url }}
style={{flex:1}}
/>
</View>Stack Overflow用户
发布于 2019-04-16 22:09:59
请使用以下代码：
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
}
});这段代码对我来说工作得非常好，
在上面的所有解决方案中，我观察到每个人都建议将flex: 1添加到您的webView样式中。
是的，它是正确的，但是如果你想在视图中嵌套WebView，然后嵌套，你需要精确地指定父视图的样式。
所以，我设置了justifyContent：'flex- start '，这样垂直方向的WebView将从我的屏幕顶部开始，而alignItems：'stretch'，这样WebView将在水平方向上获取所有可用的内容
列，因为我们使用justifyContent指定主轴对齐，使用alignItems指定次轴对齐，默认flexDirection为flexDirection。
有关如何安装react-native-webview的更多信息，请参阅以下链接：https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38963046
复制相关文章
相似问题
腾讯云开发者
