react-native-paper web端运行白屏 root div无内容问题咨询

问题1：脚本加载顺序错误 #

你当前的index.html中将app.bundle.js的加载脚本放在了root节点之前，浏览器执行JS代码时，#root节点还未被解析到DOM树中，React无法找到挂载目标，导致无法渲染内容。
直接将script标签移动到#root节点之后即可，修正后的index.html代码如下：

<!doctype html>
<html>

<head>
    <meta charSet="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />

    <title>App</title>

    <style>
        html,
        body,
        #root {
            height: 100%;
        }

        #root {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script src="app.bundle.js"></script>
</body>

</html>

其他可能的问题排查点 #

如果调整顺序后仍然白屏，按以下方向排查：

• 检查入口文件挂载逻辑：确认web端入口文件（一般为index.web.js或index.js）中的挂载代码正确指向root节点，示例逻辑如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

• 检查打包配置：你是react-native init创建的项目，需要确认webpack中已经正确配置了react-native-web的别名，且没有排除对react-native-paper包的转译
• 排查JS执行错误：打开浏览器开发者工具的控制台，查看是否有JS报错，若存在仅支持原生端的模块未做web兼容，会导致JS执行中断，渲染流程终止

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