Native Layout中的ReactRootView在第二次启动时呈现0高度 [英] ReactRootView in Native Layout renders 0 height on 2nd launch

问题描述

我正在构建混合ReactNative应用程序，正在启动自定义ReactNativeActivity，并将ReactRootView添加到本机布局中.

I am building a hybrid ReactNative app, an am launching a custom ReactNativeActivity with the ReactRootView added to a native layout.

第一次启动活动(见第一个屏幕截图)时效果很好，但是第二次启动活动(单击后退按钮销毁活动后)，ReactRootView的高度为约10像素.

This works fine the first time I launch the activity (see first screenshot), but the second time I launch the activity (after hitting the back button to destroy the activity), the ReactRootView appears to have a height of about 10 pixels.

这是为什么?如何使渲染第二次具有正确的高度?

Why is this? What can I do to cause the render to have the correct height the second time?

这是我自定义的ReactNativeActivity中的代码:

Here's the code from my custom ReactNativeActivity:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Bundle properties = new Bundle();
    Intent intent = this.getIntent();
    if (intent != null) {
        properties = intent.getExtras();
    }
    mReactRootView = new ReactRootView(this);
    mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
    mReactRootView.startReactApplication(mReactInstanceManager, "CommutybleMobile", properties);
    setContentView(R.layout.layout_react);
    LinearLayout mainLayout = findViewById(R.id.overallLayout);
    mainLayout.addView(mReactRootView);    
 }

这是我的布局:

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="start"
     android:id="@+id/overallLayout"
     android:orientation="vertical">
 </LinearLayout>

启动第一个活动后呈现:

Render after first activity launch:

回击并启动第二项活动后呈现:

Render after hitting back and second activity launch:

推荐答案

我很确定这不是不是最佳答案，但我确实设法通过添加以下技巧来解决此问题:

I'm pretty sure this is not the best answer, but I did manage to fix this by adding the following hack:

// Directly adding the react root view here (then changing to an embedded view) fixes a
// problem where the root view did not fill the space in the layout
setContentView(mReactRootView);
setContentView(R.layout.layout_react);
LinearLayout mainLayout = findViewById(R.id.mainLayout);
mainLayout.addView(mReactRootView);

首先将内容视图设置为整个ReactRootView，这似乎迫使布局处于全屏高度.因此，当稍后将其添加到mainLayout时，它已经以合理的高度膨胀了.

By first setting the content view to be entire ReactRootView, it appears to force a layout at full screen height. So when it is then added later on to the mainLayout, it is already inflated at a reasonable height.

我确实在此处看到了一些提及，并且一些解决方案是在此处提供，但是它们比我上面的技巧要复杂得多，而且似乎也很糊涂.

I did see some mention of this issue here and some solutions were offered here, but they were more complex than my hack above, and seemed to be almost as kludgy.

如果有人对此有更好的答案，我很想听听.

If anybody has a better answer to this, I'd love to hear it.

这篇关于Native Layout中的ReactRootView在第二次启动时呈现0高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！