npm安装react-native后无法导入，构建报错求助

首先得给你点明核心问题：你现在的项目是基于react-scripts的React Web项目（从react-scripts build命令能看出来），但你尝试导入的react-native是专门用于跨平台移动应用（iOS/Android）的框架，它的模块和Web项目的构建环境不兼容，这就是为什么明明装了包却还是报错找不到模块。

下面给你分两种场景给出解决方案：

场景1：你本来就是要做React Web项目（不需要React Native） #

这种情况下，你完全不需要安装react-native，直接用Web端的方案替代即可：

1. 先移除react-native依赖
   打开终端执行：

   npm uninstall react-native
   

2. 替换Dimensions的Web端实现
   React Native的Dimensions是用来获取移动设备屏幕尺寸的，Web端有更直接的替代方式：

   • 最简单的方式：直接使用浏览器的window对象获取视口尺寸

     import React from 'react';
     
     // 获取当前视口的宽高
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
     
     function AppCarousel() {
       // 你的组件逻辑
       return <div>你的轮播组件内容</div>;
     }
     
     export default AppCarousel;
     

   • 如果需要处理响应式布局（比如区分移动端/桌面端），可以用react-responsive库：
     先安装依赖：

     npm install react-responsive
     

     然后在组件中使用：

     import React from 'react';
     import { useMediaQuery } from 'react-responsive';
     
     function AppCarousel() {
       // 判断当前是否为移动端视口
       const isMobile = useMediaQuery({ maxWidth: 767 });
       // 根据设备类型设置容器宽度
       const containerWidth = isMobile ? window.innerWidth : 1200;
     
       return <div style={{ width: containerWidth }}>你的轮播组件内容</div>;
     }
     
     export default AppCarousel;
     

场景2：你本来想创建React Native项目（搞错了环境） #

如果你的目标是开发移动应用，那你不该用create-react-app创建项目，而是要用React Native专属的初始化方式：

1. 先删除当前的Web项目（如果不需要的话）
2. 用React Native CLI初始化对应版本的项目
   终端执行：

   npx react-native init MyRNProject --version 0.61.5
   

   进入项目目录后，你就可以正常导入react-native的模块，比如Dimensions，然后用react-native run-android或react-native run-ios来运行项目，而不是react-scripts build。

为什么会出现这个报错？ #

即使你在Web项目里装了react-native包，react-scripts（Create React App的构建工具）也不会去解析它的模块——因为React Native的模块是针对移动设备环境打包的，和Web项目的模块解析规则、运行环境完全不同，所以构建工具会判定找不到这个模块。

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