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直接放在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);

Answer 2

您应该不要用函数包装 Animated.event。

改变

onScroll = (event) => Animated.event({...}, { useNativeDriver: true })(event);

到

onScroll = Animated.event({...}, { useNativeDriver: true });

对于其他人，不要忘记将此处理程序传递给 Animated.FlatList/Animated.ScrollView（not 只是 FlatList/ScrollView）。< /p>

用useNativeDriver响应本机动画-_reactNative.Animated.event（...）不是函数

2 个答案: