Question

WebView是否可以在IOS模拟器中使用？

下面的代码不会返回错误，但是也不会显示任何内容。

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyTest extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

export default MyTest;

谢谢

Answer 1

WebView在我的模拟器中运行良好。我的代码：

<WebView 
useWebKit={true} 
style={{flex:1}} 
source={{uri:url}} 
startInLoadingState={true} 
renderLoading={()=>(<ActivityIndicator size='large' color={COLOR_STANDARD} 
style={{marginTop:100}} />)}>
</WebView>

Answer 2

我想为那些在ios上出现白屏的人做出贡献。首先，由于我还有其他内容，因此webview在scrollview内部。我知道建议不要将Webview包含在任何组件中。我一直在为此奋斗数周，直到遇到James Liu's。我在expo客户端（ios）上运行它，并出现白屏。这是我看到他的答案之前的代码。

    contentContainerStyle={{
          flexGrow: 1,
      }}>

    <WebView
         ref={ref => (this.webview = ref)}

    source={{uri:  currentSite}}

    style={{  height:550}}

    scrollEnabled={true}
    startInLoadingState={true}


    onNavigationStateChange={this._onNavigationStateChange.bind(this)}
    javaScriptEnabled = {true}
    domStorageEnabled = {true}

    startInLoadingState={false}
    onLoad={() => this.hideSpinner()}

    injectedJavaScript={jsCode}
    onMessage={event => {

    //Html page
    const wishData = event.nativeEvent.data;
     this._getProductName(wishData);
     this._getProductPrice(wishData);

    }}

  />
  </ScrollView>

我需要添加的全部是useWebKit = {true}，从documentation中它说：

useWebKit->如果为true，请使用WKWebView而不是UIWebView。这个道具是iOS特有的。此外，我在Google上搜索后发现WKWebView比UIWebView更新（我对此不了解）。

Answer 3

真正的问题出在属性startInLoadingState中，您必须将其设置为true：

<WebView 
    startInLoadingState={true} />

Answer 4

对我来说，解决方案是将返回WebView的组件包装到具有设置高度的View中，并将文件包装在返回WebView的组件之外。

具有高度的包装器视图应位于导入了WebView的组件的文件中。花了好几个礼拜和祈祷，但我终于发现它了！

React Native WebView无法正常工作的iOS模拟器

4 个答案: