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

本机布局中的ReactRootView在第二次启动时呈现0高度

react-native android-layout android

davidgyoung · 技术社区 · 7 年前

我正在构建一个混合的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>

第一次活动启动后渲染:

回击和第二次活动启动后渲染:

1 回复 | 直到 7 年前

davidgyoung 7 年前

不是最好的答案 ,但我确实通过添加以下黑客解决了这个问题:

// 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,它似乎强制布局处于全屏高度。因此,当它后来被添加到主布局中时,它已经膨胀到了一个合理的高度。

我确实看到有人提到这个问题 here 并提出了一些解决方案 here ,但它们比我上面的黑客更复杂,而且似乎也同样笨拙。

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

推荐文章