React Native WebView组件无法加载,一直处于加载Icon状态。

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>
    );
  }
}
阅读 8.3k
3 个回答

代码都没贴全,你让别人怎么帮你看。
WebView是个很简单的控件。
你想找出问题的最简单的办法是在官方文档中提供的例子里,把访问facebook的网址改成你想访问的网址。
然后就应当可以显示你的网址了。
然后你再一个一个比对你的WebView少了哪些属性。
看了一下,你的WebView只指定了三个属性,感觉是有些少啊。

在浏览器内搭断点 对fetch调试了

会不会是因为webview组件包含在了其它组件里面的原因?
我之前仅仅在外面套了一层<View>也无法显示内容,把<View>去掉就可以了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题