React native 在React Native中带有动画.event（）的严重滞后动画

我在React Native中开发了一个应用程序，在StackNavigator的标题下有一个动画元素。在这个动画元素下，我有一个平面列表，其中包含一些Json数据

所以我的问题是，动画在Xcodes的iPhone模拟器中是平滑的，但在我的实际设备OnePlus 6T上却不是

安装程序已弹出Expo项目，以下是我的代码：

export const window = Dimensions.get("window");
export const MAX_HEADER_HEIGHT = window.width / 5;
export const MIN_HEADER_HEIGHT = window.width / 1000;
export const MAX_BORDER_RADIUS = 450;
export const MIN_BORDER_RADIUS = -450;

HomeScreen.js

this.state = {
  scrollY: new Animated.Value(0)
};    


render() {
const { scrollY } = this.state;
const headerHeight = scrollY.interpolate({
  inputRange: [0, MAX_HEADER_HEIGHT],
  outputRange: [MAX_HEADER_HEIGHT, MIN_HEADER_HEIGHT],
  extrapolate: "clamp"
});

const borderRadius = scrollY.interpolate({
  inputRange: [0, MAX_BORDER_RADIUS],
  outputRange: [MAX_BORDER_RADIUS, MIN_BORDER_RADIUS],
  extrapolate: "clamp"
});

return (
  <View style={{ flex: 1 }}>
    <Animated.View
      style={{
        height: headerHeight,
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden"
      }}
    >
      <StatusBar barStyle="light-content" />
      <Animated.View
        style={{
          borderRadius: borderRadius,
          width: window.width * 2,
          height: window.width * 2,
          position: "absolute",
          bottom: 0,
          overflow: "hidden"
        }}
      >
        <View
          style={{
            height: window.width / 1.7,
            width: window.width,
            position: "absolute",
            bottom: 0,
            marginLeft: window.width / 2,
            backgroundColor: "#ee6e73"
          }}
        />
      </Animated.View>
    </Animated.View>
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <JobItem
          title={item.title}
          type={item.type}
          description={item.description}
          style={styles.item}
          openOffer={() => this._openOffer()}
        />
      )}
      keyExtractor={item => item.id}
      scrollEventThrottle={10000000}
      onScroll={Animated.event([
        { nativeEvent: { contentOffset: { y: this.state.scrollY } } }
      ])}
    ></FlatList>

this.state={
滚动：新的动画。值（0）
};    
render（）{
const{scrollY}=this.state；
const headerHeight=scrollY.interpolate({
输入范围：[0，最大割台高度]，
outputRange:[最大割台高度，最小割台高度]，
外推：“夹具”
});
const borderRadius=scrollY.interpolate({
输入范围：[0，最大边界半径]，
outputRange:[最大边界半径，最小边界半径]，
外推：“夹具”
});
返回(
(
这是.\u openOffer（）}
/>
)}
keyExtractor={item=>item.id}
scrollEventThrottle={10000000}
onScroll={Animated.event([
{nativeEvent:{contentOffset:{y:this.state.scrollY}}
])}
>

我已经在动画.event（）中尝试了

useNativeDriver:true

，但没有任何帮助。我还尝试了使用

scrollEventThrottle={}

的值，但也没有任何效果

---

请帮帮我，让我告诉你一些你不相信的事情，你在互联网上其他地方都找不到

---

尝试找到一种在不使用溢出的情况下设置视图样式的方法：“隐藏”。我使用的是Reanimated而不是本机动画API，在运行声明性spring动画时，我遇到了无法确定的延迟。我认为这是因为我在做嵌套动画以及动画高度和宽度，这可能会导致帧延迟掉落，但我错了。当我移除溢出：隐藏道具时，一切都变得光滑。我建议你尝试使用Reanimated，因为默认情况下，动画是在本机线程上运行的，这会显著提高性能。让我告诉你一些你不相信的事情，你在屏幕上的其他任何地方都找不到它互联网

尝试找到一种在不使用溢出的情况下设置视图样式的方法：“隐藏”。我使用的是Reanimated而不是本机动画API，在运行声明性spring动画时，我遇到了无法确定的延迟。我认为这是因为我在做嵌套动画以及动画高度和宽度，这可能会导致帧延迟掉落，但我错了。当我移除溢出：隐藏道具时，一切都变得平滑。我建议您尝试使用Reanimated，因为默认情况下，动画在本机线程上运行，从而显著提高性能