React Native WebView 组件无法显示内容。
class NewsDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
newsDetail: '',
loaded: false,
};
const REQUEST_URL = `http://news-at.zhihu.com/api/3/news/${this.props.route.passProps.id}`;
this.fetchData(REQUEST_URL);
}
fetchData(REQUEST_URL) {
fetch(REQUEST_URL)
.then(response => response.json())
.then(responseData => {
this.setState({
newsDetail: responseData,
loaded: true,
});
})
.done();
}
_handlePressBtn() {
this.props.navigator.pop();
}
render() {
var loading = (
<View style={NewsDetailStyle.container}>
<View style={NewsDetailStyle.loading}>
<ActivityIndicatorIOS
size="large"
color={GODDESS_COLOR}
/>
</View>
</View>
);
var newsData;
var HTML;
if (this.state.newsDetail.id) {
newsData = this.state.newsDetail;
HTML = `
<!DOCTYPE html>
<html>
<head>
<title>${newsData.title}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320, user-scalable=no">
<link rel="stylesheet" href='${newsData.css[0]}'><link>
</head>
<body>
${newsData.body}
<script src='${newsData.js[0]}'></script>
</body>
</html>
`
}
var barIcon = <Icon name='arrow-left' size={20} color='#fff' style={NewsDetailStyle.backIcon} onPress={this._handlePressBtn.bind(this)}/>
return (
<View style={NewsDetailStyle.container}>
<NavigationBar
title={{title: '新闻详情', tintColor: '#fff'}}
tintColor={GODDESS_COLOR}
statusBar={{style: 'light-content', hidden: false, showAnimation:'none'}}
leftButton={barIcon}
/>
<View style={NewsDetailStyle.summary}>
{!this.state.loaded ? loading : null}
<WebView style={NewsDetailStyle.webview}
source={{html: `<h1>Hello</h1>`}}
startInLoadingState={true}
>
</WebView>
</View>
</View>
);
}
}
代码都没贴全,你让别人怎么帮你看。
WebView是个很简单的控件。
你想找出问题的最简单的办法是在官方文档中提供的例子里,把访问facebook的网址改成你想访问的网址。
然后就应当可以显示你的网址了。
然后你再一个一个比对你的WebView少了哪些属性。
看了一下,你的WebView只指定了三个属性,感觉是有些少啊。