React-Native Offline Bundle - 图片未显示答案

【问题标题】：React-Native Offline Bundle - Images not showingReact-Native Offline Bundle - 图片未显示
【发布时间】：2016-05-13 21:39:14
【问题描述】：

我有一个 React-Native 应用程序，我正尝试以发布模式将其部署到我的手机上。我可以将应用程序捆绑到手机上。数据库、视频和音频资产都在其中，但 UI 中没有显示图像。

我已完成以下操作来“捆绑”我的应用程序：

在终端的项目文件夹中运行react-native bundle --platfrom ios --dev false --entry-file index.ios.js --bundle-output main.jsbundle
将main.jsbundle文件的引用拖到XCode的myapp文件夹下
在 XCode 中，打开 AppDelegate.m 并取消注释 jsCodeLocation = [[NSBundle mainBundle]…
打开Product > Scheme > Edit Scheme 然后将Build Configuration 更改为Release
在项目导航器下选择myapp，然后：在TARGETS: myappTests > Build Phases > Link Binary With Libraries 按+ 选择 Workspace > libReact.a 和 Add

当我尝试使用myapp > targets > myapp > Bundle React Native code and images 中的../node_modules/react-native/packager/react-native-xcode.sh 设置在XCode 中编译时，它会以error code 1 失败。

我已经看过很多关于此的帖子，我已经尝试过：

检查Run script only when installing- 然后应用程序安装但没有图像
将 source ~/.bash_profile 添加到 react-native-xcode.sh - 应用构建失败

任何帮助将不胜感激！

【问题讨论】：

我也有同样的问题，你解决了吗？
目前还没有，但我的同事相当肯定这是我的节点安装别名的方式......我们需要调查一下。他可以用同样的方式捆绑，一切正常。

标签： ios xcode react-native

【解决方案1】：

当你生成 bundle 时，还要放 --assets-dest ./

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

它将生成main.jsbundle 和 Assets 文件夹。转到您的 Xcode 右键单击将文件添加到项目并将main.jsbundle 文件添加到项目。还要拖放 Assets 文件夹并选择按引用创建（注意：不要选择创建组）。

我使用的是反应 0.33， main.jsbundle 正在使用 assets(small a) 文件夹但生成 Assets(Caps A)。我刚刚将生成的文件夹从 Assets 更改为 assets 并将其导入 xcode 并开始工作

【讨论】：

显然，选择create by reference 而不是create groups 确实有很大的不同。然后，您可以将 assets 文件夹作为一个整体添加到 Build Phases > Copy Bundle Resources 中，而不是每个单独的资产文件，这似乎会影响 RN 找到它们的能力。
同样拖拽Assets文件夹，选择create by reference（注意：不要选择create group）。 (Y)(Y)(Y)(Y)(Y)(Y)(Y)(Y)(Y)(Y)
我运气不好。不知道为什么。我以前没有遇到过问题。

【解决方案2】：

对于 iOS 14：转到此目录： node_modules/react-native/库/图像并打开 RCTUIImageViewAnimated.m 然后将 else 条件添加到这部分：

if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
[super displayLayer:layer];
}

【讨论】：

【解决方案3】：

在您的 Rn 项目根目录中运行此命令：

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

并在 XCode 中将文件夹的引用添加到您的项目中。

【讨论】：

【解决方案4】：

图像是在 xcode 中还是在文件系统中？，我在你的包参数中没有看到 --assets-dest

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

还可以像 bundle 一样将 assets 文件夹添加到 xcode。

请注意，只有在正确需要时才会复制图像资源，请参阅documentation

【讨论】：

谢谢！我会试一试！
这个命令的结果是：未知选项'--minify'，有什么想法吗？
@Moussawi7 缩小标志已合并到 -dev 标志中 --dev [boolean] 如果为 false，则禁用警告并缩小捆绑包