当组件在后台时，反应原生组件在做什么

Question

当组件在后台时，react-native 组件在做什么？

当组件重新响应到前台时，反应原生会做什么？

与页面 A 一样，导航到页面 B。B页回到A页，A和B怎么了？

是否有任何 UI 更新，例如 Android 上的 onResume 或其他东西？

编辑：

我有一个带有四个选项卡的选项卡导航。其中一个选项卡呈现一个Android UI组件，它是一个自定义框架布局(列表视图位于框架布局中(。

首次呈现 frameLayout 时，列表视图位置不正确(位置为 -4 项目高度(。但是当我导航到子页面并返回时，我发现 frameLayout 现在是正确的，并且没有进入任何 android 生命周期。

所以我想知道它是在做一些背景吗？

Answer 1

如果没有关于您使用的导航类型的详细信息，很难判断，但考虑到您使用的是常见的导航包，我可以解释一下。

如果您的导航是某种堆栈导航，

则当您导航/推送新屏幕以查看以前的屏幕时，该屏幕位于堆栈下方，并且不会卸载。这很像把一副牌发到一堆纸牌上。除非该特定组件的道具或状态发生变化，否则它不会重新渲染。当您向后导航时，新屏幕将卸载，上一个屏幕将显示回来。

通用包允许您将 props 传递到下一个屏幕，如果您需要重新渲染以前的组件，则可以通过从前一个组件发送函数并在当前屏幕的生命周期事件上运行它来实现componentWillUnmount一个简单的技巧来实现这一点。我在这个答案中解释了这种用法。

Answer 2

调试了很多次后，我发现是react-navigation。

主页中的四个选项卡，底部选项卡栏。当我进入一个带有navigationOptions:{header:null}的子页面时，底部栏消失了。当我从子页面返回时，底部栏同时回来了，整个视图已经更正。似乎整个视图都在重新绘制？所以我在createViewInstance()打电话给view.requestLayout().所以最终的结果是视图需要请求布局手册。

更新：答案顶部并不完全正确。最后一个问题是自定义视图应该在其requestLayout中测量自身。我在 https://github.com/facebook/react-native/issues/4990 中找到了答案

@Override
public void requestLayout() {
    super.requestLayout();
    post(measureAndLayout);
}
private final Runnable measureAndLayout = new Runnable() {
    @Override
    public void run() {
        measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
        layout(getLeft(), getTop(), getRight(), getBottom());
    }
};

并感谢您的answers.@bennygenel @Jouke