适用于 iOS 的 React Native 发布包中没有图像

Question

I've looked high and low at solutions to this problem, but none of them have worked.

on iOS, I'm making a release bundle with react-native bundle --dev false --assets-dest ./ios/Bundle --entry-file index.js --platform ios --bundle-output ./ios/Bundle/main.jsbundle

Afterwards, I'm adding the Bundle directory which includes the assets directory and the main.jsbundle to my project in XCode.

Then I change the Run scheme to work on the Release configuration, and run the project on a physical device.

React Native finds the bundle, but none of the static assets show up.

I'm on React Native 0.48

Answer 1

Incase anyone else has a similar problem and needs some ideas where to look..

Check your xcode build logs and to see where your bundle is being created probably something like

/Users/johnsmith/Library/Developer/Xcode/DerivedData/MyApp-asde14dwefda878/Build/Products/Release-iphonesimulator/MyApp.app

Inspect and make sure that main.jsbundle and assets/ are both at the top level. If they're not then check your arguments to the bundle command (called by the bundle react native code and images build phase by the react-native-xcode.sh command) the defaults should be fine. you can also use set -x to print out more info about what's being called, or click show environment variables in build log

Assuming that everything is in the correct location...then try looking where the code is really looking for the image

import background from "../../assets/background.png"
alert(Image.resolveAssetSource(background).uri);

Inspect in file explorer and see if you can find the file. The folder my code was looking in was this:

/Users/.../Library/Developer/CoreSimulator/Devices/718SDF9995-1123D6-46A8-93DD-830963FC4372/data/Containers/Data/Application/25C8SG9C-2CSA-4891-BDFD-B6B37A3B4022/Library/Application Support/.expo-internal/

In my case I had ejected from expo and the file was there under a hash but the code was looking for it as ../assets/background.png It was using expo-asset to resolve the file in release (not metro as in debug), the fix was to add

../node_modules/expo-updates/scripts/create-manifest-ios.sh

to the end of the Bundle React Native code and images build phase and to add import 'expo-updates' to the top of my App.tsx file

Another idea would be to add an external image and see if it can load that.

source={{uri:'https://......../...png'}}

There's also the problem with Ios14 images that can be fixed by updating react-native or using npx react-native-fix-image but that would also affect dev builds