React Native WebView 不工作 IOS 模拟器

Question

WebView 在 IOS 模拟器中工作吗？

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

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

真正的问题在属性 startInLoadingState，你必须将其设置为 true:

<WebView 
    startInLoadingState={true} />

Answer 3

我想在这里为那些在 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 特定的。此外，我用谷歌搜索发现 WKWebView 比 UIWebView 更新（我对此了解不多）。

Answer 4

对我来说，解决方案是将返回我的 WebView 的组件包装在一个具有设置高度的视图中，并在文件外部设置 returns 我的 WebView 的组件。

具有高度的包装视图应该在具有WebView的组件被导入的文件中。拍了好几遍，祈祷了好几次终于找到了 muahahaha！

React Native WebView 不工作 IOS 模拟器

React Native WebView not working IOS simulator

webview

react-native