2

尝试将侦听器添加到Animated Diff Clampin react native 以允许更改几个非动画属性。

它最初执行正确，但当屏幕滚动超出其 max 属性时会引发“非法节点”错误。

“非法节点 ID 设置为 Animated.DiffClamp 的输入”

大多数关于这方面的文章都已经过时了几年，并建议您不能将侦听器添加到 diff 钳位。但是，它确实有效（现在？），但前提是在构造函数中声明。

并非所有情况都允许它在那里，因为当不在渲染内部时它不响应状态变化。在渲染内部，它在达到最大值并抛出上面的错误之前表现良好。

Render () {

    const yHeader = Animated.diffClamp(
        this.props._yScroll.interpolate({
            inputRange: [0, 48],
            outputRange: [0, -48],
            extrapolateLeft: 'clamp',
        }),
        -48, 0)

    yHeader.addListener(
        Animated.event([{value: this.value.ySearch}], {useNativeDriver: false})
    )

    // this.value.search has been declared in the constructor as an Animated value and is waiting to receive the props. This is not the problem!
}

如果在抛出错误时仍然滚动，您可以看到如果在 console.log 中输出其当前值，它会继续正确执行，尽管“非法”错误完全阻塞了屏幕。

  • 是否可以将侦听器添加到 Diff Clamp？
  • 如果没有，如果 DiffClamp 在构造函数中，为什么它会起作用？
  • 假设第一个问题是否定的并且我没有在某处搞砸一些东西，这里是否有解决方法？
4

1 回答 1

0

这解决了问题，但似乎是一个非常不必要的解决方法。

  1. 当 Diff Clamp 在 Render 中声明时，我们似乎无法“合法地”向 Animated Diff Clamp 添加监听器。（即使我们可以在控制台日志中看到它在工作，我们也会收到覆盖屏幕的错误）

  2. 解决方案是获取 Diff Clamp 的值并将其插入到一个新变量中。

//

const yHeader = Animated.diffClamp(
    this.props._yScroll.interpolate({
        inputRange: [0, 48],
        outputRange: [0, -48],
        extrapolateLeft: 'clamp',
    }),
-48, 0)

const yHeader_legalised = yHeader.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
})

 yHeader_legalised.addListener(
     Animated.event([{value: this.value.ySearch}], {useNativeDriver: false})
 )

PS。您将不得不在渲染的上下文中丢失 yHeader_legalised 来代替 yHeader，以便听众可以收听一些东西。

于 2020-04-24T11:25:35.410 回答