React Native WebView 组件无法显示HTML内容。



  • 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 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>
          `
        }
    
        return (
          <View style={NewsDetailStyle.container}>
    
            <View>
              <WebView style={NewsDetailStyle.webview}
                source={{html: HTML}}
                startInLoadingState={true}
                >
              </WebView>
            </View>
          </View>
        );
      }
    }
    

    打印了变量HTML复制另存为.html文件可以正常显示页面


登录后回复