javascript - 使用 useNativeDriver react 原生动画 - _reactNative.Animated.event(...) 不是函数

Question

我想使用 native 驱动程序在 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直接在里面 onScroll={...} ，然后它工作。但我想知道如何使用 Animated.event外 render功能。

谢谢。

Answer 1

简短回答:不可能 .您只能通过 Animated.event 使用 native 驱动程序进入 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);