Native Layout中的ReactRootView在第二次启动时呈现0高度

时间:2018-11-28 15:51:42

标签: android android-layout react-native

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

第一次启动活动(见第一个屏幕截图)时效果很好,但是第二次启动活动(单击后退按钮以破坏活动后),ReactRootView的高度似乎为约10像素。

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

这是我自定义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>

首次活动启动后呈现:

good render

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

bad render

1 个答案:

答案 0 :(得分:0)

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

// 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时,它已经在合理的高度膨胀了。

我确实看到了关于here这个问题的一些提法,并提供了here的一些解决方案,但是它们比我上面提到的要复杂得多,而且似乎也很笨拙。

如果有人对此有更好的答案,我很想听听。