如何隐藏组件而不卸载它?

时间:2017-08-01 18:54:14

标签: layout react-native

我有一个列表组件,我想在不需要的时候保留在DOM中,这样滚动位置就不会丢失。

我已尝试将样式设置为{display: 'none'},但这会卸载该组件。我也试过设置{ flex: 0.0001 }哪种工作但感觉就像一个黑客(他们可能会优化到" 0"稍后)并且当组件显示时会产生布局故障/隐藏。

知道这样做的正确方法是什么?

3 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望组件保持挂载但不占用任何空间或渲染任何东西?如果你只是将一个hide属性传递给组件,如果它是真的那么只会在渲染中返回一个空视图。

答案 1 :(得分:1)

我发现在最近的React Native中,这种方法具有以下作用:

{ display: 'none' }

对我来说做得很好,我的Tab组件可以切换布局而无需卸载其内容。

经过以下测试:RN 0.58.1, iPhone X 12.1

答案 2 :(得分:0)

尝试一下:

<div style={{visibility: this.state.hidden ? 'hidden' : 'visible'}}>
    content
</div>