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

【问题标题】：What is react-native component doing when the component is in background当组件在后台时，react-native 组件在做什么
【发布时间】：2017-11-13 09:26:53
【问题描述】：

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

当组件重新激活到前台时，react-native 会做什么？

喜欢页面 A 导航到页面 B。然后页面 B 回到页面 A。A 和 B 发生了什么？

有没有像 Android 上的 onResume 之类的 ui 更新？

编辑：

我有一个带有四个选项卡的 TabNavagation。其中一个选项卡呈现一个 Android UI 组件，它是一个自定义框架布局（一个列表视图在框架布局中）。

frameLayout第一次渲染时，listview位置不正确（位置为-4项高度）。但是当我导航到子页面并返回时，我发现frameLayout现在是正确的并且没有进入任何android生命周期。

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

【问题讨论】：

组件的生命周期方法可以参考文档：reactjs.org/docs/react-component.html

标签： react-native

【解决方案1】：

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

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

通用包允许您将道具传递到下一个屏幕，如果您需要重新渲染前一个组件，则可以通过从前一个组件发送一个函数并在 componentWillUnmount 生命周期事件上运行它来轻松实现此目的当前屏幕的。我在this answer中解释了这种用法。

【讨论】：

也许与反应生命周期无关？我已经更新了描述。谢谢。
TabNavigation 是来自 react-navigation 包吗？如果是在导航首次呈现时单独呈现选项卡。这是默认行为。如果 props 或 state 没有改变标签，则不要重新渲染。
e...这不是重新渲染的事情。我重新渲染了组件手册，但列表仍然在错误的位置。我只是不知道为什么我进入子页面并返回，列表已更正。

【解决方案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());
    }
};

感谢您的回答。@bennygenel @Jouke

【讨论】：