解析与项目根目录外的本机包文件相关的资产
resolving assets relative to react native bundle file outside project root
问题(android):如果 bundle 文件位于项目根目录之外,相对于 js bundle 文件的图像资源应该放在哪里?
我们有一个小型服务,我们在每次构建时上传 JS 包。因此,例如我们有应用程序 com.example
,如果我们想要更新我们的应用程序(应用程序商店中正在等待应用程序审核),那么我们:
- 将 JS 包下载到 android 路径
/data/data/com.example/files/bundle/android.bundle
- 通过 https://github.com/mauritsd/react-native-dynamic-bundle
将此捆绑包设置为活动
想象一下,在 React App 组件中,我们有一张路径为 star.png
.
的图片
当我们激活一个新的捆绑包时,星图不会显示。
我在发布版本中通过 https://reactnative.dev/docs/image#resolveassetsource 检查了图像路径,图像 uri 仅解析为 star
。
所以我尝试了以下文件结构:
№1
data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star // <= our image
№2
data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star.png // <= our image
但如果捆绑文件位于项目根目录之外,则不会显示静止图像。
问题:
- 我做错了什么? https://github.com/Microsoft/react-native-code-push 以某种方式设法解决了它。
- ios 的解决方案是否与 android 的解决方案相同?
提前致谢
Bundle assets 应该放在 js bundle 文件所在的同一文件夹中(仅在 android 上测试过)。
您始终可以通过 https://reactnative.dev/docs/image#resolveassetsource.
获取捆绑资源路径
如何测试:
- 将图像
star.png
放入项目根目录。
- 使用以下代码创建一个 React Native 应用程序:
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 捆绑器 运行ning,因为它总是重写捆绑路径。
现在,如果您 运行 该应用程序,您将收到错误消息 "Bundle not found"。
- 上传
android.bundle
文件到 /data/data/com.testassetsapp/files/android.bundle
现在,如果您 运行 该应用程序应该会启动。但是星图还没有显示。
- 将
assets
文件夹中的捆绑文件上传到 /data/data/com.testassetsapp/files
,因此应用数据结构应如下所示:
现在,如果您重新启动应用程序,应该会显示星形图像。
问题(android):如果 bundle 文件位于项目根目录之外,相对于 js bundle 文件的图像资源应该放在哪里?
我们有一个小型服务,我们在每次构建时上传 JS 包。因此,例如我们有应用程序 com.example
,如果我们想要更新我们的应用程序(应用程序商店中正在等待应用程序审核),那么我们:
- 将 JS 包下载到 android 路径
/data/data/com.example/files/bundle/android.bundle
- 通过 https://github.com/mauritsd/react-native-dynamic-bundle 将此捆绑包设置为活动
想象一下,在 React App 组件中,我们有一张路径为 star.png
.
当我们激活一个新的捆绑包时,星图不会显示。
我在发布版本中通过 https://reactnative.dev/docs/image#resolveassetsource 检查了图像路径,图像 uri 仅解析为 star
。
所以我尝试了以下文件结构:
№1
data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star // <= our image
№2
data
--data
----com.example
------files
--------bundle
----------android.bundle <= dynamic bundle from remote server
----------star.png // <= our image
但如果捆绑文件位于项目根目录之外,则不会显示静止图像。
问题:
- 我做错了什么? https://github.com/Microsoft/react-native-code-push 以某种方式设法解决了它。
- ios 的解决方案是否与 android 的解决方案相同?
提前致谢
Bundle assets 应该放在 js bundle 文件所在的同一文件夹中(仅在 android 上测试过)。
您始终可以通过 https://reactnative.dev/docs/image#resolveassetsource.
获取捆绑资源路径如何测试:
- 将图像
star.png
放入项目根目录。 - 使用以下代码创建一个 React Native 应用程序:
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 捆绑器 运行ning,因为它总是重写捆绑路径。
现在,如果您 运行 该应用程序,您将收到错误消息 "Bundle not found"。
- 上传
android.bundle
文件到/data/data/com.testassetsapp/files/android.bundle
现在,如果您 运行 该应用程序应该会启动。但是星图还没有显示。
- 将
assets
文件夹中的捆绑文件上传到/data/data/com.testassetsapp/files
,因此应用数据结构应如下所示:
现在,如果您重新启动应用程序,应该会显示星形图像。