【问题标题】:Why we use the removeClippedSubviews property in the View component in react-native?为什么我们在 react-native 的 View 组件中使用 removeClippedSubviews 属性?
【发布时间】:2018-11-19 12:24:06
【问题描述】:

为什么我们在 react-native 的 View 组件中使用 removeClippedSubviews 属性,它的作用是什么?文件说:

这是RCTView 公开的特殊性能属性,是 当有很多子视图时,对于滚动内容很有用,大多数 哪些是屏幕外的。要使该属性有效,它必须是 应用于包含许多子视图的视图,这些子视图延伸到其外部 边界。子视图也必须有overflow: hidden, 包含视图(或其父视图之一)。

documentation 似乎无法理解。谁能用一个小例子解释一下?

【问题讨论】:

    标签: android ios reactjs react-native


    【解决方案1】:

    将 removeClippedSubviews 设置为 false 解决了一个可怕的问题,即如果您在 FlatList 中使用 TextInput,Android 键盘会消失,并且点击的 TextInput 位于即将成为键盘区域的下方。

    (我什至在 React Native 文档示例中重现了这一点,我只是在虚拟 android 上运行了一个示例并将 Text 更改为 TextInput。)

    我认为即将在键盘下的子视图被删除,因为它们即将被键盘剪切,导致键盘立即离开,因为不再呈现 TextInput。

    因此,至少在 FlatList 上,该属性有一个(在我的情况下)关键用途。

    【讨论】:

      【解决方案2】:

      你需要先了解裁剪视图的概念 剪辑视图意味着基于某些逻辑显示的选择性视图,例如

      if(this.state.status === true){
      return(<View style={{backgroundColor:'red'}}/>)
      }else{
      return(<View style={{backgroundColor:'green'}}/>)
      }
      

      在上面的示例中,我们有两个视图,红色和绿色,但根据状态一次只显示一个,这就是所谓的剪辑视图

      现在回到你的问题 removeClippedSubviews 属性将重置或删除所有将释放一些空间的剪辑视图

      注意:- 解释是基于我个人对不同论坛的理解,我什至没有参考,您可以多挖掘这个话题并为我提供资源,因为我我也在学习 谢谢你:)

      【讨论】:

      • 但是当我使用这个props 时,memory 消耗更多
      • 这很奇怪,removeClippedSubViews 实际上是为了性能优化,但官方文档声明你应该自担风险使用它,你可能会发现它有问题reactnative.dev/docs/flatlist#removeclippedsubviews
      猜你喜欢
      • 2019-04-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-05-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多