React Native中WebView显示为空但链接可用的技术求助

Hey there! Let's figure out why your WebView is showing up empty even though the URL works perfectly in a browser. This is a super common pitfall, and I’ve got a few fixes that should get things working for you:

1. Fix the Layout (The #1 Culprit) #

The most likely issue is that your View and WebView components don’t have sizing styles applied. By default, they’ll take up 0 height/width—so you can’t see content even if it loads successfully.

Update your code to make sure everything fills the screen:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Constants } from 'expo';
import { WebView } from 'expo-webview'; // Switch to Expo's optimized WebView

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.statusBar} />
        <WebView
          source={{ uri: 'https://lapommeculturelle.com' }}
          style={styles.webView}
          renderError={() => alert('Merci de vérifier votre connexion Internet - Internet non disponible')}
          // Add debug logs to confirm loading status
          onLoad={() => console.log('Page loaded successfully!')}
          onLoadEnd={() => console.log('Load process completed')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, // Make outer View fill the entire screen
    backgroundColor: '#fff',
  },
  statusBar: {
    height: Constants.statusBarHeight,
    backgroundColor: '#000',
  },
  webView: {
    flex: 1, // Make WebView fill remaining space
  },
});

2. Use Expo’s Official WebView #

The WebView from react-native can have compatibility issues with Expo projects. Expo maintains its own expo-webview package, which is optimized for Expo environments and fixes many common loading bugs. No extra installation is needed if you’re using a recent Expo SDK—just swap the import as shown above.

3. Debug Loading Status #

The onLoad and onLoadEnd callbacks will help you confirm if the page is actually loading:

• If you see "Page loaded successfully!" in your Expo console, the content exists but is hidden (layout issue)
• If you don’t see these logs, there’s a problem with the loading process (network, certificate, or CORS restrictions)

4. Verify HTTPS/Certificate Issues #

Mobile WebViews are stricter about HTTPS certificates than desktop browsers. Test with a known-good URL like https://google.com—if that loads, your target site might have a certificate chain issue or CORS rules that block the WebView.

5. Test on a Real Device #

Simulators/emulators sometimes have network quirks that don’t reflect real devices. If your code looks solid but still doesn’t work, try running your Expo project on a physical phone to rule out simulator-specific problems.

内容的提问来源于stack exchange，提问作者Jérémie DEMANGE