Question

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

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>
    <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。感谢。

Answer 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>

Answer 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,
  }
});

Answer 3

出于某种原因，我的iOS修复程序是<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

React Native中的WebView为空

3 个答案: