React Native Animated with useNativeDriver - _reactNative.Animated.event(...) 不是函数

Question

我想使用本机驱动程序在 React Native 应用程序中处理动画。我正在使用Animated.FlatList，我想onScroll在render函数之外定义。这是代码片段。

class FlatListWithAnimation extends React.PureComponent {
  [...]

  onScroll = (event) => Animated.event(
    [{
      nativeEvent: {
        contentOffset: { y: this.state.scrollY },
      },
    }],
    {
      useNativeDriver: true,
      listener: (event, gestureState) => console.log(event, gestureState),
    },
  )(event);


  render() {
  [...]
    return (
      [...]
      <Animated.FlatList
        key="FlatList"
        data={placeHolderData}
        renderItem={this.renderPlaceHolder}
        onScroll={this.onScroll}
      />
      [...]
    );
  }
}

但是，这会产生_reactNative.Animated.event(...) is not a function错误。当我Animated.event直接放入inside 时onScroll={...}，它就起作用了。但我想知道如何Animated.event在render函数之外使用。

谢谢。

Answer 1

简短的回答：这是不可能的。您只能通过将使用本地驱动程序Animated.event到onScroll处理程序。

PanResponder 尚不支持原生动画，因为它是在纯 JS 中实现的。

你可以这样写，但它会像 useNativeDriver: false

onScroll = (event) => Animated.event(
  [{
    nativeEvent: {
      contentOffset: { y: this.state.scrollY },
    },
  }],
  {
    useNativeDriver: true,
    listener: ({ nativeEvent }) => this.state.scrollY.setValue(nativeEvent.contentOffset.y),
  },
).__getHandler()(event);