You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

首个React Native应用:Web端打开显示空白页面

Hey there, let's troubleshoot why your Expo React Native web app is only showing the icon and title without the actual content from your App.js! Here are some actionable steps to fix this:

1. Clear Cache & Restart the Dev Server

Cached assets or old build artifacts are often the culprit here. Let's do a clean restart:

  • Close your current Metro terminal window completely
  • Run this command in your project folder:
    expo start -c
    
    (This is shorthand for "start Expo with cache cleared")
  • When the Metro menu pops up, press w again to open the web app. This should force a fresh build of your code.

2. Launch Web Directly Instead of Using Metro's Menu

Sometimes switching modes in Metro can cause hiccups. Try starting the web environment directly:

  • Run this command:
    npm run web
    
    This will bypass the Metro selection menu and boot straight into the web dev server. Check if your content loads now.

3. Test the Production Build

Let's rule out issues with the dev server by building a static web version:

  • First, build the web app:
    expo build:web
    
  • Once the build finishes, you'll have a web-build folder. To serve it locally:
    • If you don't have a static server installed, run:
      npm install -g serve
      
    • Then serve the build:
      serve web-build
      
  • Visit the URL shown (usually http://localhost:3000) and see if your <Text> component appears.

4. Check for Browser Console Errors

Hidden JavaScript errors might be preventing your app from rendering:

  • When the web page loads (even if only the icon shows), press F12 to open Developer Tools
  • Switch to the Console tab and look for red error messages. Common issues here could be missing assets, module conflicts, or runtime errors that stop your app from mounting.

Quick Note on Your Code

Looking at your App.js, package.json, and config files—everything looks structurally correct. The <View> with flex:1 should center your text perfectly on web, so the issue is almost certainly related to build/cache or dev server quirks rather than your code itself.

内容的提问来源于stack exchange,提问作者Europa

火山引擎 最新活动