标签: metro-bundler

我正在运行 npx 脚本来在 VS Code 集成终端中构建，但 Metro Bundler 在新的 cmd/bash 终端中运行。如何在VS Code集成终端中运行它？

我的react-native开发环境是Windows 7；直到昨天都工作正常，但是 APK 在加载捆绑包后突然报告错误。

错误消息：

Unknown
run
    NativeRunnable.java
handleCallback
    Handler.java:873
dispatchMessage
    Handler.java:99
dispatchMessage
    MessageQueueThreadHandler.java:29
loop
    Looper.java:193
run
    MessageQueueThreadImpl.java:232
run
    Thread.java:764

我用谷歌搜索了这个错误，但没有运气。我尝试使用清除缓存npm start -- --reset-cache，但错误仍然存​​在。我发现并尝试了类似的帖子，但他们的解决方案也不起作用。

错误日志猫：

06-16 14:30:16.144  5885  6735 E unknown:ReactNative: Exception in native call
06-16 14:30:16.144  5885  6735 E unknown:ReactNative: com.facebook.jni.UnknownCppException: Unknown
06-16 14:30:16.144  5885  6735 E unknown:ReactNative:   at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
06-16 14:30:16.144  5885  6735 E unknown:ReactNative:   at android.os.Handler.handleCallback(Handler.java:873)
06-16 14:30:16.144  5885  6735 E unknown:ReactNative:   at android.os.Handler.dispatchMessage(Handler.java:99)
06-16 14:30:16.144  5885  6735 E unknown:ReactNative:   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29) …

我对Expo和React-Native的机制，它们如何下载资产感到困惑。

我知道的信息是，一旦您构建代码，expo就会准备一个捆绑包，其中同时包含javascript（编译后的代码）和资产。

并且在调试会话期间，该捆绑包-整体上-首先由expo客户端下载，然后启动该应用程序。这意味着一旦启动应用程序，代码中所有“导入”的资产都应就位。

另一方面，当我运行以下原子测试代码时，这是完全相反的。加载这些资产需要花费时间，就像它们是“延迟加载”一样。

所以我的问题是；行为开发模式相关吗？还是在生产模式下下载图像仍然需要时间？

• 如果生产模式的行为相同，那么它将从哪里下载资产？
• 如果生产模式与开发模式不同，为什么将开发模式安排为不同的行为？

import * as React from 'react';
import { Text, View, StyleSheet, Image, Button } from 'react-native';
import Test0Img from './assets/test0.gif';
import Test1Img from './assets/test1.gif';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      imageIndex: 0,
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text></Text>
        <Text></Text>
        <Button
          onPress={() => {
            let l_newImageIndex = (this.state.imageIndex + 1) % 2;
            this.setState({ imageIndex: l_newImageIndex });
          }}
          title="Click to Change Image"
        />
        <Image
          source={this.state.imageIndex …

问题：

我有一个带有特定于平台的代码的反应本机自定义挂钩，我需要根据平台导入该代码。如果我像这样导入它import useWifi from 'hooks/use-wifi.android';，一切都会正常（在android上）。

我尝试过的：

按照 rn 针对平台特定代码的说明，我有以下文件结构

...
hooks
  ...
  use-wifi.android.ts
  use-wifi.ios.ts
...

但是，当我尝试像这样导入它时import useWifi from 'hooks/use-wifi';，打字稿类型检查未通过，并且我在 Metro 中收到此错误：

error: Error: Unable to resolve module `hooks/use-wifi` from `src/screens/home/index.tsx`: hooks/use-wifi could not be found within the project.

我添加了一个use-wifi.d.ts文件

export * from './use-wifi.android';
export * from './use-wifi.ios';

这允许tsc通过，但地铁仍然无法捆绑。

我想我可以有一个hooks/use-wifi.ts文件并将代码拆分在那里，但如果可能的话我宁愿这样做。

我的 React Native (0.66.3) 应用程序今天弹出一个错误，其中的稳定代码已经很长一段时间没有任何更改了。它位于 macOS Big Sur 上。这是错误：

 ERROR  TypeError: undefined is not a function, js engine: hermes
Error: ENOENT: no such file or directory, open '/Users/macair/Documents/code/js/xyz_app5/http:/localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.xyz-app5'
    at Object.openSync (fs.js:498:3)
    at Object.readFileSync (fs.js:394:35)
    at getCodeFrame (/Users/macair/Documents/code/js/xyz_app5/node_modules/metro/src/Server.js:919:18)
    at Server._symbolicate (/Users/macair/Documents/code/js/xyz_app5/node_modules/metro/src/Server.js:992:22)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Server._processRequest (/Users/macair/Documents/code/js/xyz_app5/node_modules/metro/src/Server.js:403:7) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/macair/Documents/code/js/xyz_app5/http:/localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.xyz-app5'
}

这是IOS模拟器上显示的错误：

该错误似乎与 React Native 中的 Metro 相关。

我在我的一个应用程序中面临一个奇怪的问题，当我使用构建应用程序时

expo build:ios

然后使用上传应用程序

运输车

当我从 TestFlight 下载应用程序时opens up with a white screen。我尝试使用以下命令在设备上以生产模式运行应用程序

expo run:ios -d

之后在捆绑器中按p切换到生产模式。使用本地 IP 地址在本地运行良好。

当我导出.ipa文件并尝试在设备上运行时，它给了我

该应用程序无法安装，因为无法验证其完整性

以前有人遇到过同样的问题吗？为什么它没有显示任何错误？

一些信息：我正在使用世博会管理的裸工作流程

应用程序.json

{
  "expo": {
    "name": "Myndfulness",
    "slug": "myndfulness",
    "owner": "**************************",
    "version": "1.0.1",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "backgroundColor": "#fff",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 300
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "app.myndfulness",
      "buildNumber": "29",
      "usesAppleSignIn": true,
      "backgroundColor": "#FFFFFF",
      "icon": "./assets/icon.png",
      "userInterfaceStyle": "light",
      "config": …

将我们的 React Native 从 0.63.3 更新到 0.66 后，

CryptoJS.AES.decrypt(encryptedString, key)

返回无效数据。我们能够确定这与 Metro + babel 依赖关系有关，但无法找到解决方法。这与 0.56.0 到 0.65.0 的 Metro Bundler 有关吗？使用：

 react-native-crypto-js

ios 模拟器屏幕截图 - 控制台警告

在 iOS 模拟器上运行我的反应本机应用程序时，在控制台警告中，我无法查看源，如消息所示：

该调用堆栈没有符号化。某些功能不可用，例如查看功能名称或点击打开文件。

关于符号化的react-native文档对我来说并没有多大帮助，因为我看不到它们之间的关系（react-native/symbolication）

我需要的是问题根源的视图，如所附屏幕截图所示

具有可读源代码的 iOS 模拟器（来源：github/react-native-community/issue-69）

我可以在我的配置/项目中更改任何内容，还是这只是一厢情愿？

非常感谢！

尝试运行一个以x-resources包作为依赖项的反应本机项目，使用纱线安装了依赖项，但是当我尝试运行该项目时，我在运行时收到此错误

bundling failed: Error: While trying to resolve module `x-resources` from file `/***/index.js`, the package `/***/node_modules/x-resources/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/***/node_modules/x-resources/dist/index.js`. Indeed, none of these files exist:

 *  /***/node_modules/x-resources/dist/index.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
 * /***/node_modules/x-resources/dist/index.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

    at ResolutionRequest.resolveDependency (/***/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15)
    at DependencyGraph.resolveDependency (/***/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
    at Object.resolve (/***/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /***/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31
    at Array.map (<anonymous>)
    at resolveDependencies (/***/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)
    at /***/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/***/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
    at _next (/***/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9)

这个包中没有/dist文件夹，我不明白为什么它在里面寻找index.js，我不知道这是一个与地铁相关的问题还是特定于这个包的，我尝试关闭正在运行的js服务器多次但没有运气。

• 反应：16.9.0

• 反应本机：0.61.4

• x …

我目前正在尝试使用 React Native SVG 在我的 RN 应用程序中渲染 SVG 组件。但是，metro.config.js 配置会导致一些我似乎无法解决的错误。

我已经安装了react-native-svg和react-native-svg-transformer并组合了metro配置文件，如下所示：

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      }),
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

但是，我总是收到以下错误：

[Sun Feb 13 2022 17:49:52.470]  ERROR    ReferenceError: Can't find variable: config …