捆绑资产应放置在 js 捆绑文件所在的同一文件夹中(仅在 android 上测试)。
您始终可以通过https://reactnative.dev/docs/image#resolveaassetsource获取捆绑资产路径。
如何测试:
- 将图像放入
star.png
项目根目录。
- 使用以下代码创建一个反应原生应用程序:
import React from 'react';
import {
SafeAreaView,
Text,
StatusBar,
Image
} from 'react-native';
import Star from './star.png';
const App: () => React$Node = () => {
const r = Image.resolveAssetSource(Star);
console.log(r);
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<Text>TestAssetsApp</Text>
<Image
style={{width: 50, height: 50}}
source={Star}
/>
</SafeAreaView>
</>
);
};
export default App;
MainApplication.java
在您的(我的应用程序包称为)中设置捆绑路径com.testassetsapp
:
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost =
new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
// Add this method
@Override
protected String getJSBundleFile() {
return "/data/data/com.testassetsapp/files/android.bundle";
}
};
- 通过以下方式创建 android JS 包和资产:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android.bundle --assets-dest assets
- 通过以下方式安装调试版本:
cd android && ./gradlew installDebug
注意:仅在./gradlew installDebug
没有运行 Metro 捆绑器的情况下通过测试,因为它总是重写捆绑路径。
现在,如果您运行该应用程序,您将收到错误“找不到捆绑包”。
- 上传
android.bundle
文件到/data/data/com.testassetsapp/files/android.bundle
现在,如果您运行该应用程序,它应该会启动。但星图尚未显示。
assets
将文件夹中的捆绑文件上传到/data/data/com.testassetsapp/files
应用程序数据结构应如下所示:
现在,如果您重新启动应用程序星形图像应该会显示。