React Native main.jsbundle文件显示在我的iOS项目中,但仍然抛出“No bundle url present”

eyh26e7m  于 2023-05-18  发布在  React
关注(0)|答案(5)|浏览(281)

我正在创建一个新的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文件夹中删除build,然后重新build。

  • 删除包含rm -r build的构建文件夹
  • 再次运行react-native run-ios
    方案三:Package.json文件行下增加
"build:ios": "react-native bundle --entry-file ./index.js --platform ios --bundle-output ios/main.jsbundle"

一点运气都没有。
即使我的Metro Builder在端口8089上运行8081,也会被MacFee防火墙应用程序使用。

kqhtkvqz

kqhtkvqz1#

最后,我解决了上述问题。下面是帮助我解决这个问题的解决方案。
所以,正如我在我的问题中提到的,我尝试了几乎所有的解决方案发布在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

**Que:**它会做什么?
**并且:**会手动生成包含所有JS代码的main.jsbundle文件。

1.生成main.jsbundle文件后,我尝试再次运行应用程序,并得到相同的错误“没有捆绑包url

**解决方案:**我发现手动生成的文件没有添加到我的Project目标中,所以我将main.jsbundle文件添加到我的app目标中。
**Step1:**在XCode ->项目导航器窗格中选择您的main.jsbundle
**Step2:**在目标成员资格部分勾选相关项目目标。

最后一步是在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"
  }

希望这将帮助那些与这个问题斗争的人。
我真的在过去的三天里一直在为这个问题奋斗。
感谢StackOverflow和Github问题。
参考链接:https://github.com/facebook/react-native/issues/18472

z9ju0rcb

z9ju0rcb2#

我想添加我发现的解决方案,因为我最初隐藏了,但没有解决错误使用build:ios方法。这个答案对于其他人也在挣扎,可能是一个解决方案:
我的main.bundle.js不存在,因为node_modules/react-native/scripts/react-native-xcode.sh捆绑失败,因为RN中的调试和发布的相对导入路径不同。
我试图使用babel-inline-import + react-native-svg导入SVG文件。因为react-native从命令行运行调试模式,根目录将在导入svg的文件中匹配,但是因为当React Native在发布模式下构建时(在CI上或者当你执行Xcode->Product->Archive时),它运行.sh脚本以iOS文件夹作为根目录创建bundle。所以现在的贴片坏了。
如果你使用build:iOS技巧,你会跳过这个错误,但应用程序立即崩溃,因为它仍然缺少资源。棘手的部分是在日志中找到相对简单的错误。我也花了三天时间在这上面。

fcipmucu

fcipmucu3#

我在Babel Github上找到了你问题的解决方案。
更改您的babel.config.js以使用此

module.exports = {
    presets: [['module:metro-react-native-babel-preset', {
        unstable_disableES6Transforms: true
    }]],
};

unstable_disableES6Transforms线为我工作。

v9tzhpje

v9tzhpje4#

我遇到了同样的问题:iOS构建失败,因为它找不到main. jsbundle。
下面的解决方案对我很有效。运行下面的命令,你只需要运行一次

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

它将生成一个main.jsbundle文件。
注意:如果您想使用Metro服务器进行开发,则不需要生成资产文件。
使用xcode或“npx react-native run-ios”构建应用程序
现在你可以看到应用程序在模拟器/设备中打开,但它是一个静态应用程序,即你不能使用快速重载或调试选项
为此,在新终端中键入以下命令启动metro服务器

npx react-native start

现在在设备上重新启动应用程序,您的应用程序将连接到Metro服务器,之后您可以使用开发工具。

lvmkulzt

lvmkulzt5#

要创建main.jsbundle,只需添加package.js:-

"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"

}
然后运行**npm run postinstall**

相关问题