标签: metro-bundler

将我的 React Native 应用程序更新到最新版本 ( 0.60.4) 后，使用启动我的应用程序react-native run-ios将导致我的应用程序在没有 Metro Bundler 的情况下启动。

然后应用程序将显示以下错误：

为了让我的应用程序正常运行，我需要使用启动地铁捆扎机npm start，然后运行react-native run-ios。

虽然这是一种解决方法，但以前我没有这个问题，只需运行react-native run-ios就会自动启动 Metro Bundler。我该如何解决这个问题？

编辑：我NSAppTransportSecurity来自Info.plist：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

我正在使用打字稿遵循排毒模拟指南。该应用程序始终打印X.ts文件的 console.log 而不是X.e2e.ts文件。

依赖版本。

react-native: 0.61.5,
detox: 16.4.0

地铁配置：

"detox": {
    "test-runner": "jest",
    "runner-config": "e2e/config.json",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/App.app",
        "build": "RN_SRC_EXT=e2e.js,e2e.ts xcodebuild -workspace ios/App.xcworkspace -scheme 'App Test' -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "device": {
          "type": "iPhone 11"
        }
      }
    }
  }

地铁配置.js

const defaultSourceExts = require("metro-config/src/defaults/defaults").sourceExts;

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  },
  resolver: {
    sourceExts: process.env.RN_SRC_EXT …

我有一个现有的 React 本机应用程序。我想创建另一个应用程序并在它们之间共享一些代码。\n我利用 MetroextraNodeModules将共享代码导入到任一应用程序中。\n在任一应用程序中，我希望能够执行以下操作：

// MyApp1/src\\navigation\\app.navigator.js\nimport { someUtilModule } from \'shared\';\n

不幸的是，当应用程序包加载到我的开发设备上时，它失败并显示：

error: Error: Unable to resolve module `shared` from `src\\navigation\\app.navigator.js`: shared could not be found within the project or in these directories:\n  C:\\path\\to\\my\\project\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro\'s cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*\n    at ModuleResolver.resolveDependency …

有没有办法从 expo 项目主文件夹之外的文件夹进行转换和支持导入？

我希望从共享文件夹中导入一些其他文件。

这是我的设置和问题：

根文件夹

有 3 个子文件夹，不package.json，不tsconfig.json，只有这些：

• /server --> 一个nodejs Rest api
• /mobile --> 世博会项目
• /shared --> 包含许多常见打字稿文件的文件夹

手机文件夹

这个有使用typescript生成的 expo 项目。项目工作正常，直到我从 导入一些东西./shared。

从 expo 文件夹中导入文件./shared不起作用：（npm run start在 中运行./mobile fodler）

// mobile/src/screents/login
import { inject } from "../../../../shared/src/core/di"

我得到的错误是这样的：

网址：

IOS:

我的假设是找到该文件但未触发 babel/typescript 转译。我不确定在哪里可以指定这方面。

我的mobile/babel.config.js是expo生成的标准的：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

没有mobile/metro.config.js。

我查看了文档，并在博览会和地铁配置之间迷失了方向。

介绍

我正在尝试使用官方文档使用 React Native 0.63.3 创建一个 Hello World 风格的程序。我正在使用该链接中的React Native CLI 快速入门路径。

到目前为止我所做的

我已经进入了以下部分：
运行您的 React Native 应用程序
步骤 1：启动 Metro

我跑了：

npx react-native start --verbose

我得到以下输出：

               ######                ######               
             ###     ####        ####     ###             
            ##          ###    ###          ##            
            ##             ####             ##            
            ##             ####             ##            
            ##           ##    ##           ##            
            ##         ###      ###         ##            
             ##  ########################  ##             
          ######    ###            ###    ######          
      ###     ##    ##              ##    ##     ###      
   ###         ## ###      ####      ### ##         ###   
  ##           ####      ########      ####           ## …

我目前正在使用 React Native 开发一个项目，昨天它运行良好，没有任何错误，现在突然间我收到了这个错误。

error Cannot find module 'metro-config/src/defaults/blacklist'
Require stack:
- /Users/sri/Downloads/cc_x/reactnativelcsapp/VitalitiApp/metro.config.js

我尝试了很多解决方案，删除节点模块并将其重新安装，更新模块，希望更改后备列表。我检查了我的文件，但找不到黑名单文件，但我正在尝试修复它，但老实说不知道如何修复它。我想知道是否有人会知道该怎么做。

我正在运行本机应用程序，并不断遇到应用程序未连接到代码以进行自动更新的问题。

我尝试过的事情：

• 通过以下命令重新加载 main.jsbundle： npx react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios/assets
• 完全删除节点并从我的计算机中做出本机反应
• 重新启动我的电脑
• 在物理设备上运行并在模拟器上运行
• 清理 Xcode 中的派生数据

这是启动时的屏幕，它提供了“连接到 Metro 以开发 JavaScript”的建议。

从自动启动的 Metro 捆绑器中，当我键入“r”重新加载时收到此消息，内容为“React Native：未连接应用程序”。

我正在使用 0.61，并且一直都是。

我还应该尝试什么？

编辑

我能够通过重新启动计算机（再次）来使其工作。

每隔一段时间，重新启动就可以解决问题，但大多数时候它不起作用。仍然必须有更可靠的方法来解决这个问题。

我目前正在为 ios 和 android 开发一个react-native。我想添加 4 个新软件包（react-native-gesture-handler、react-native-reanimated、react-native-safe-area-context和@gorhom/bottom-sheet），这在安装时给我带来了一些麻烦，所以我切换到另一个软件包，它可以毫无问题地替换这 4 个软件包。
现在的问题是，即使将项目回滚到之前的样子，运行时仍然崩溃，并npm run-android出现错误：

> hbmggmbh_app@0.0.1 android
> react-native run-android

info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1001 file(s) to forward-jetify. Using 8 workers...
info JS server already running.
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
> Task :app:checkDebugAarMetadata FAILED

Deprecated Gradle features were used in this build, making …

我使用 EAS 创建了 Expo 应用程序的开发版本。npx expo start以前，我会通过运行并扫描 Metro Bundler 二维码来打开 Expo Go 中的应用程序。

现在，当我尝试做同样的事情时，Expo Go 会询问我是否要在 Expo Go 中打开该项目还是作为“开发构建”。它在 Expo Go 中运行良好，但当我尝试打开开发版本时立即崩溃。错误如下：

null 不是对象（正在评估 '_ReanimatedModule.default.createNode'）

这个错误与我之前在开发过程中遇到的错误非常相似，我通过降级到 React Native 版本 0.69.6 解决了这个错误。我还遇到第二个错误，显示“'main'尚未注册”，但我怀疑这是第一个错误的下游。

当我尝试使用 运行应用程序时，我遇到了同样的问题npx expo start --dev-client。

有什么想法为什么我可能会遇到这个问题吗？

我正在开发一个 React Native 项目，该项目是具有多个包的更广泛项目的一部分。项目的文件夹结构如下（排除大部分无关文件）：

monorepo\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 packages\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 backend\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 frontend-app\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 babel.config.js\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 metro.config.js\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n    \xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 src\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 shared\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 data-types.ts\n

在文件夹内frontend-app，我希望能够从data-types.ts文件导入类型。@shared/data-types此外，我想通过使用而不是必须使用相对路径../../shared/data-types（甚至更多文件夹）来做到这一点。

我只能发现您必须更新应用程序项目本身内的常规路径babel.config.js别名tsconfig.json，但在运行应用程序时我仍然收到如下警告：

Unable to resolve module ../../../../shared/data-types from ***: \n\nNone of these files exist:\n  * ../shared/data-types(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)\n  * ../shared/data-types/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)\n\n[...]\n\n

如何使其适用于 React Native 项目文件夹之外的文件？