xcode React-Native 离线包 - 图像未显示

React-Native Offline Bundle - Images not showing

提问by scgough

I have a React-Native app I'm trying to deploy in Release mode to my phone. I can bundle the app to the phone. Database, Video and audio assets are all in there but no images are showing in the UI.

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

I have done the following to 'bundle' my app:

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

1. in the project folder in Terminal run react-native bundle --platfrom ios --dev false --entry-file index.ios.js --bundle-output main.jsbundle
2. Drag the reference to the main.jsbundlefile into XCode under myappfolder
3. In XCode, open AppDelegate.mand uncomment jsCodeLocation = [[NSBundle mainBundle]…
4. Open Product > Scheme > Edit Schemethen change Build Configurationto Release
5. Select myappunder the project navigator and then: under TARGETS: myappTests> Build Phases> Link Binary With Librariespress +select Workspace> libReact.aand Add

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

When I try and compile in XCode with the ../node_modules/react-native/packager/react-native-xcode.shsetting in myapp > targets > myapp > Bundle React Native code and imagesit fails with error code 1.

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

I've seen LOADS of posts on this and I've tried:

我已经看过很多关于这个的帖子，我试过：

• to check Run script only when installing- the app then installs but with no images
• adding source ~/.bash_profileto react-native-xcode.sh - the app build fails

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

Any help would be greatly appreciated!

任何帮助将不胜感激！

回答by Dinesh Sharma

When you are generating bundle , Also put --assets-dest ./

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

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

“反应原生包 --platform ios --assets-dest ./ --dev false --entry-file index.ios.js --bundle-output iOS/main.jsbundle”

It will generate main.jsbundle and Assets folder . Go to your Xcode right click add files to project and add main.jsbundle file to project. Also drag and drop Assets folder and select create by reference (note: do not select create group).

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

i was using react 0.33, main.jsbundle is using assets(small a) folder but generating Assets(Caps A). I just changed the generated folder from Assets to assets and import it to xcode and it start working

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

回答by papacostas

are the images in xcode or in the file system?, i dont see an --assets-destin your bundle parameters

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

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

also add the assets folder to xcode like the bundle.

还将资产文件夹像捆绑包一样添加到 xcode。

note that the image assets are only copied if they are required correctly, see the documentation

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

回答by matt

Run this command in your Rn project root:

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

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

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

And add reference of folder into your project in XCode.

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