代码之家 › 专栏 › 技术社区 › Ilja

在android中加载react native bundle之前,保持SplashScreen

android-inflate splash-screen react-native android

Ilja · 技术社区 · 6 年前

我在本文中遵循了android指南 How to Add a Splash Screen to a React Native App

我的SplashScreen活动在我的主要活动之前启动,即android应用程序膨胀时。

到目前为止还不错,但我想删除react原生js包加载导致的白色闪烁。文章建议使用 react-native-splash-screen 然而,我希望将依赖关系保持在最低限度。

React本机文档包含以下内容 Pro Tip 这基本上达到了我想要的效果,但在iOS中(在未加载捆绑包的情况下,它会一直显示初始屏幕)。我正试图弄清楚我将如何在android的本机java中做类似的事情,但到目前为止还没有成功。

2 回复 | 直到 6 年前

Serge Seredenko 6 年前

以下是通过React添加内容时的一种方法:

=== MainActivity.java ===

import com.facebook.react.*;
import android.content.Context;
import android.app.Activity;
import android.util.Log;
import android.view.View;

public class MainActivity extends ReactActivity {
    class CustomReactActivityDelegate extends ReactActivityDelegate {
        class CustomReactRootView extends ReactRootView {
            public CustomReactRootView(Context context) {
                super(context);
            }
            @Override
            public void onViewAdded(View child) {
                 super.onViewAdded(child);
                 Log.d("React views started to appear", "Static js code has already run");
            }
        }
        private Activity currentActivity;
        public CustomReactActivityDelegate(Activity activity, String mainComponentName) {
            super(activity, mainComponentName);
            currentActivity = activity;
        }
        protected ReactRootView createRootView() {
            return new CustomReactRootView(currentActivity);
        }
    }
    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new CustomReactActivityDelegate(this, getMainComponentName());
    }
    ...
}

正如你所看到的,这个想法是为了覆盖一些东西,以连接到所需的时刻。

您可以在这些类中看到其他要挂接的内容,但通常情况下,react loads捆绑包与jni函数是异步的,所以我不确定还有多少事情要做。你可以覆盖一条链子

MainApplication (分配 mReactNativeHost )->
ReactNativeHost.createReactInstanceManager (复制原始方法,但调用 ReactInstanceManagerBuilder.setJSBundleLoader )->
JSBundleLoader (包裹原始文件 JSBundleLoader.createAssetLoader 进入自定义子类,该子类将调用 loadScript 然后再打电话 CatalystInstanceImpl.callFunction )->
CatalystInstanceImpl.PendingJSCall 在那里跑你需要的东西。

换言之,这很可怕,但仍能做出反应并不能保证 PendingJSCall 在加载捆绑包之前不会运行。

-1

Community Tales Farias 4 年前

使用 rn-splash-scren 。当您的react组件加载时,只需调用

从“rn SplashScreen”导入SplashScreen;

//隐藏活动启动屏幕

飞溅屏幕。隐藏();

您需要从本机端进行设置,但这很容易。