Question

这是什么意思？当我更新像

这样的迭代视图列表时会发生这种情况

<View style={{ flexDirection: 'row', padding: 20, backgroundColor: '#fff' }}>
  <Ionicons name={jobIcon} color={theme.iconColor} size={30} />
  <Text>{jobService}</Text>
  <Text>{jobDate}</Text>
</View>

在滚动视图中映射。

当我从子场景修改数组时会弹出此错误。 scene1 - 是带有作业列表数组视图的ScrollView sence2 - 是我删除作业的地方，当我删除作业时应该更新scene1

Answer 1

如果您希望 LayoutAnimation 与 ScrollView 一起使用，请替换

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)

使用

        LayoutAnimation.configureNext({
                             duration: 300,
                             create: 
                             {
                                type: LayoutAnimation.Types.easeInEaseOut,
                                property: LayoutAnimation.Properties.opacity,
                             },
                             update: 
                             {
                                type: LayoutAnimation.Types.easeInEaseOut,
                             }
                            });

这可以在Android和iOS上正常运行，而不会崩溃。

Answer 2

在我的情况下，我使用LayoutAnimation作为我的ScrollView。里面有一个项目地图。从列表中删除项目时会发生这种情况。不使用LayoutAnimation似乎工作正常。

Answer 3

当你正在处理布局动画时调用布局动画时会发生这种情况。当Android出现此错误时，iOS会显示警告。当您从同一组件使用LayoutAnimation时，可以使用这种简单的模式来修复它。

layoutAnimation()  {
  if (!this.layoutAnimationActive) {
    this.layoutAnimationActive = true;
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInOut, () => { this.layoutAnimationActive = false; });
  }
}

Answer 4

如果某个组件只有x个子项，但您尝试删除索引大于x的子项，则会发生这种情况。就像数组中常见的索引超出范围异常一样。可能会导致很多挫折感，因为您试图移除的孩子经常会感染现有的感染。但可能会发生这种情况，因为您使用的第三方组件只需要一定数量的孩子。

对我而言，当我将一个额外的孩子放入air-bnb MapView时，就发生了这种情况。我通过将这个元素作为它的祖父母的孩子来解决这个问题（它绝对定位，因此它不会影响样式）。

Answer 5

使用Expo创建本机应用程序时遇到了这个问题。

当我在地图（通过MapView组件渲染）上绘制新标记时，经常会出现此错误。

对我来说，解决此问题的方法是在Marker组件中添加一个关键道具，例如

 <Marker coordinate={coordinate} key={`${coordinate.latitude}_${coordinate.longitude}`} />

希望这可以帮助在处理MapView和Marker组件时遇到此问题的任何人！

Answer 6

如果您使用一些本机组件，则可能会发生这种情况，其中某些ViewManager在ViewGroupManager的createShadowNodeInstance中返回LayoutShadowNode或在Android的ViewManager的createShadowNodeInstance中返回扩展ReactShadowNode的东西，以及在iOS上的RCTViewManager的shadowView方法中返回RCTShadowView的东西。但是，在其他ViewManager中为其他View返回null / nil。

然后，如果您将两种类型的子级合并在同一父级中，并且任何没有shadowViews / Nodes的元素都在变化的具有shadowViews / Nodes的元素数之前，则索引将不匹配，并且iOS上的RCTUIManager和Android上的NativeViewHierarchyManager会阻塞并产生这些异常。

我最近通过使所有ViewManager返回值而不是null / nil解决了react-native-svg中的类似问题。 https://github.com/facebook/react-native/issues/23350

因此，请尝试将react-native-svg升级到v9.2.4，此问题可能已解决。或者，尝试将离子图标移到孩子的末端。

Answer 7

就我而言，我正在删除虚拟列表中的项目。我正在使用redux管理列表数据，并使用新数据更新了列表。但是，已删除项目的组件导致了此错误。

我通过在此项目组件上添加布尔状态属性（例如“ hideItem”）来解决此问题。我的项目是一个类组件，但是setState挂钩也可以用于功能组件。删除后，我将其设置为true。该帖子正确隐藏了布局动画，并且在页面刷新时不再呈现已删除的项目。因此，该错误在android上消失了，而无需使用LayoutAnimation。

Answer 8

很明显，该错误似乎可以在各种情况下显示其丑陋的面孔。经过几个小时的调试，我发现根本原因是将关键道具传递给了不需要它的组件。我仍然不确定这是为什么导致崩溃的，但是，我怀疑它与以下事实有关：该组件接受密钥作为识别视图的唯一方式，但是还使用了用于更新组件状态的componentWillReceiveProps(props: *)生命周期方法。

Answer 9

我遇到了同样的问题，因为我在使用LayoutAnimation更新的条件中有一个Array.map。我通过在map函数中移动状态变量来修复它。

Answer 10

我使用的是活力化的平面列表，带有向左滑动，向右滑动删除选项，并且当列表超过200个项目并且我使用LayoutAnimation时，以上问题基于任意出现，我发现由于LayoutAnimation而删除的项目仍然存在，因此您可以使用以下代码来尝试更新时间

LayoutAnimation.configureNext({
    duration: 300,
    create: 
    {
       duration:500
       type: LayoutAnimation.Types.easeInEaseOut,
       property: LayoutAnimation.Properties.opacity,
    },
    update: 
    {
       duration: 500,
       type: LayoutAnimation.Types.easeInEaseOut,
    }
   });
 
this.refs['task'].setNativeProps({
    style: {transform: [{translateX: Dimensions.get('window').width}]},
  });

还有一件事情，我也在删除该项目后突然将其隐藏起来

这是代码段

this.props.handleDeleteTask(this.props.item.id);
this.setState({hideItem:true}) // here I am hiding through state function, so the item should disappear right after it's deletion.

尝试删除子计数错误以上的视图索引

10 个答案: