ios - main.jsbundle 文件显示在我的 iOS 项目中，但仍然抛出 "No bundle url present"

Question

我正在创建一个新的 React Native 应用程序，但在 iOS 模拟器上运行它时遇到诸如“No bundle URL present”之类的错误。

在 iOS 上运行应用程序的命令:

react-native run-ios --port=8089

我尝试了以下链接中建议的所有可能的解决方案。

What is the meaning of 'No bundle URL present' in react-native?

https://www.andrewcbancroft.com/2017/04/22/solving-react-natives-no-bundle-url-present-error/

还有很多其他引用资料，但一点运气都没有。

解决方案 1:我尝试在 info.plist 中添加 AppTranportSecurity 标志。

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

解决方案 2:尝试从 iOS 文件夹中删除构建并重新构建。

• 使用 rm -r build 删除构建文件夹
• 再次运行react-native run-ios

解决方案 3: 添加到 Package.json 文件中的行下方

"build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle"

一点运气都没有。

甚至我的 Metro Builder 在 端口 8089 上运行，作为 8081 也被 MacFee 防火墙应用程序使用。

Answer 1

最后，我解决了上面的问题。以下是帮助我解决此问题的解决方案。

因此，正如我在问题中提到的，我尝试了 SO 或其他门户网站上发布的几乎所有解决方案，但没有成功。因此，我对生成的 iOS 代码进行了更多调查，并了解到以下几点。

1. 我的 main.jsbundle 生成但该文件中没有 JS 代码，所以这是我在此应用程序中的第一个问题。

解决方案:尝试使用以下 react-native 命令生成您的 main.jsbundle 文件，并在您的 iOS 文件夹中验证它。

react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'

或者

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios

问题:它会做什么？

And: 它将手动生成包含所有 JS 代码的 main.jsbundle 文件。

1. 生成 main.jsbundle 文件后，我尝试再次运行该应用程序并遇到相同的错误“No bundle url”

解决方案:我发现手动生成的文件没有添加到我的项目目标中，所以我将 main.jsbundle 文件添加到我的应用程序目标中。

第 1 步:在 XCode -> Project Navigator Pane 中选择您的 main.jsbundle

第 2 步:在 Target Membership 部分检查 Related Project Target。

最后也是最后一步是在 package.json 中添加 iOS 的构建脚本命令

"scripts": {
    ...
    "bundle:ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
    "postinstall": "npm run bundle:ios"
  }

希望这能帮助那些为这个问题而苦苦挣扎的人。

在过去的 3 天里，我确实在为这个问题而苦苦挣扎。

感谢 StackOverflow 和 Github 问题。

引用链接:https://github.com/facebook/react-native/issues/18472