React Native 中的 WebView 为空答案

【问题标题】：WebView is empty in React NativeReact Native 中的 WebView 为空
【发布时间】：2018-09-17 14:19:41
【问题描述】：

问题。 WebView 在 React Native 中是空的。但是，该链接有效。代码：

import React from 'react';
import { StyleSheet, View, WebView } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {

  render() {
    return (
    <View>
    <View style={styles.statusBar} />
     <WebView
        source={{uri: 'https://lapommeculturelle.com'}}
        renderError={() => alert('Merci de vérifier votre connexion Internet - Internet non disponible')}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBar: {
    backgroundColor: "#1D3B57",
    height: Constants.statusBarHeight,
  }
});

对于这个项目，我使用了 Expo XDE。谢谢。

【问题讨论】：

标签： react-native webview expo

【解决方案1】：

我相信您需要指定 webview 的高度和宽度，以及指定包装视图的 flex。试试这个：

<View style={{flex:1}}>
<View style={styles.statusBar} />
 <WebView
    style={{height: 300, width: 300}}
    source={{uri: 'https://lapommeculturelle.com'}}
    renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
  />
</View>

【讨论】：

【解决方案2】：

至少，您需要一个包含其余部分的 View 样式。

我推荐<View style={{flex: 1}}> 只是为了让您入门。在理想情况下，您可以将其作为与您的容器相关联的样式，并将其从您的 StyleSheet 中提取出来：

import React from 'react';
import { StyleSheet, Text, View, WebView, ActivityIndicator } from 'react-native';
import { Constants } from 'expo';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.statusBar} />
        <WebView
          source={{uri: 'https://lapommeculturelle.com'}}
          renderError={() => alert('Merci de vérifier votre connexion Internet', 'Internet non disponible')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  statusBar: {
    backgroundColor: "#1D3B57",
    height: Constants.statusBarHeight,
  }
});

【讨论】：

【解决方案3】：

出于某种原因，我对 iOS 的修复是 style：

<WebView
  // fixes warning when page has an iframe (about:srcdoc)
  originWhitelist={['http://*', 'https://*', 'about:srcdoc']}
  renderLoading={this._renderLoadingWebView}
  scrollEnabled
  source={{ uri }}
  style={{ borderWidth: 1, borderColor: 'transparent' }}
/>

react-native-webview 7.5.2

【讨论】：