Expo项目使用react-native-webview加载网页出现白屏问题求助

问题排查与解决方案 #

• 移除RN中不支持的HTML标签：React Native不支持<h1>这类Web端HTML标签，所有文本内容必须包裹在<Text>组件内，非法标签会导致渲染异常，请先删除代码中的<h1>Test</h1>，换成带自定义样式的<Text>组件实现标题效果。
• 给WebView添加明确的布局约束：你当前代码中的WebView未指定任何宽高样式，父容器设置了alignItems: 'center'会导致WebView默认宽高为0，自然显示空白。给WebView添加样式属性，设置style={{ flex: 1, width: '100%' }}即可让WebView占满剩余可用空间。
• 排查目标链接可访问性：你当前配置的WebView源是YouTube站点，如果你在国内网络环境下测试，该站点无法正常访问会导致加载后白屏，建议先替换为国内可正常访问的公共站点验证功能是否正常。
• 检查安卓网络权限：如果是安卓端运行，请确认项目配置中已添加网络权限，Expo项目默认自带该权限，如果你有自定义配置可检查app.json中是否配置了安卓的INTERNET权限。
• 重新安装匹配版本依赖：你当前使用的Expo SDK 41和react-native-webview 11.2.3版本是匹配的，若上述修改后仍有问题，可执行expo install react-native-webview重新安装官方适配的版本，避免版本兼容问题。

修复后参考代码 #

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

const styles = StyleSheet.create({
 container: {
  flex: 1,
  backgroundColor: '#fff',
 },
 title: {
   fontSize: 24,
   fontWeight: 'bold',
   marginVertical: 16,
   paddingHorizontal: 16
 }
});

export default function App(){
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Test</Text>
      <Text style={{paddingHorizontal: 16, marginBottom: 16}}>Test text</Text>
      <WebView
        style={{flex: 1, width: '100%'}}
        source={{ uri: 'https://www.baidu.com' }}
      />
    </View>
   );
}

内容的提问来源于stack exchange，提问作者VALNET VLN