Dynamically compiling and running a react-native app inside another

Question

I need to create a mobile app that contains other apps and can run them. It is basically like an "app center" which have a list of apps (that we publish on our server) and the user can open one of them which lead to the app being opened.

Think about Expo's app, the user can scan the QR code of his app and it will be automatically compiled and opened, this is close to the feature I want.

The apps that can be opened are created using react-native and stored inside GIT repositories in Gitlab.

Consider the following example:

By launching the app, which we call App Center, a list of apps will be shown. When the user click on one of them, it will be opened internally.

---

Here's a "more technical" example:

1. The App Center is launched
2. The app will get the list of apps to show from the server, for example by calling https://myappcenterserver.com/all-apps
3. They will be displayed and it will listens to press events
4. Let's say the user pressed an app called 1st App (it's a very bad name I know) which have AP123 as an ID
5. Our app will send a request to the server by calling https://myappcenterserver.com/app/AP123, this will either returns the react-native source code of the app from the Git repository
6. Our app center will compile the code from step 5 and run it

---

So according to you which is the best approach I should consider.

Should I use a remote code solution such as CodePush or react-native-dynamic-bundle ? Do they fit in this context ?

Answer 1

这可以部分通过 CodePush 实现：

\n

\n
• 为不同的应用程序创建多个CodePush环境。（APP1 APP2 等）
\n
• 当您启动应用程序时，进行 API 调用以获取应用程序列表和相应的代码推送部署密钥。
\n
• 在按钮上单击 codepush.sync(deployment_key) \xe2\x86\x92 重新启动应用程序，然后直接跳转到您的应用程序（可能将应用程序名称存储在 AsyncStorage 中并通过导航直接跳转到它）
\n

\n

然而，警告可能会破坏交易：

\n

\n
• 选择应用程序后，您的应用程序将重新加载
\n
• 主要 React 版本升级（原生 java/oc 更改）将需要商店发布，因为它无法通过 JS 处理（可能不会破坏交易）
\n

\n

还有一个更好的方法：

\n

\n
• 创建一个容器应用程序和一个 CodePush 环境
\n
• 有一个像这样的中央配置[{app:"A1", version: 2.0.0}, {app: "A2", version: 1.2.0}]
\n
• 所有其他应用程序 A1、A2、A3 都公开可以作为插件公开到容器应用程序的对象。
\n
• 您的 CI 处理从多个存储库（或者更好 - 由不同存储库生成的多个 npm 包）动态构建应用程序，并将 JS 推送到 CodePush 服务器。
\n
• 它将配置中的所有应用程序（bash 脚本添加到yarn add A1、yarn add a2、yarn add a3）添加到容器中，
\n
• 您的应用程序读取配置并加载 A1 A2 等。
\n
• CD 创建新的 CodePush 版本。
\n

\n

每当中央配置发生更改时（例如，在 A1 发布 npm 包后，他们更新中央配置），就会重复此操作。

\n

它解决了重新启动的问题，因为您已将所有捆绑包构建到一个捆绑包中。

\n

CodePush：\n https://learn.microsoft.com/en-us/appcenter/distribution/codepush/react-native#dynamic-deployment-assignment

\n

或者您可能想要查看expo的代码https://github.com/expo/expo/blob/d56076241cef55b0a93a5c0bb8dc690270e42dcb/home/screens/QRCodeScreen.android.js#L89

\n