说明
这个项目包含两个演示,一个演示如何在 OpenHarmony 侧将 raw 文件推送到沙箱并成功加载,另一个演示如何在 React Native 侧加载沙箱中的图片。
目录结构
├── SandBoxNativeProject
| └── Index.ets
| ├── downloadBundle # OpenHarmony 侧推送 raw 文件到沙箱中
| └── new FileJSBundleProvider # OpenHarmony 侧加载沙箱中的文件
└── SandBoxRnProject
└── example.tsx # React Native 侧加载沙箱中的图片
OpenHarmony 侧
- 将文件推送到沙箱: 使用
downloadBundle函数的 getRawFileContent 方法将 rwaFile 中的文件推送到沙箱,以便之后的读取操作。 - 加载文件: 使用
new FileJSBundleProvider类从沙箱中加载文件并验证其内容。
React Native 侧
- 加载沙箱中的图片: 使用
example.tsx中的代码,从 OpenHarmony 沙箱中加载图片,并在 React Native 应用中显示。
运行步骤
- 在
SandBoxRnProject目录下执行 pnpm i 安装依赖,执行 pnpm dev 生成 bundle.harmony.js; - 用 DevEco Studio 打开
SandBoxNativeProject,等待工程自动同步完成,(手动同步,执行 Sync and Refresh Project); - 点击 File > Project Structure > Signing Configs,登录并完成签名;
- 点击右上角的 run 启动项目;
注意事项
- 确保 OpenHarmony 和 React Native 项目配置正确,以便文件可以在两个系统之间无缝传递与加载。
- 沙箱路径的使用和文件访问权限需要根据具体环境进行调整。
效果预览
通过代码将bundle推送到沙箱:
