react-native - 动画标题在 iOS 上未正确显示

Question

我有两个组件，一个视图标题和一个平面列表。预期的行为是当用户向下滚动以隐藏 View 标题以及当用户向上滚动以再次向用户显示标题时。它基于 Flatlist 的 contentOffsetY。

它在 android 上工作得很好，但在 iOS 上的行为并不一致，有时在屏幕安装时标题无法正确显示。

您可以在该图像中看到，标题在安装时很高： https ://ibb.co/MgKXwVp

我定义了动画值的索引组件：

const heightView = MixinsStyles.hp(Platform.OS === "android" ? moderateScale(140, 0.05) : 163);

const Search = () => {
  const scrollY = new Animated.Value(0);

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
      <ViewSearchAnimated state={{ refetch, getLocationAsync, scrollY, heightView }} />
      {status === "error" ? (
        <HomeError refetch={refetch} />
      ) : (
        <SearchList state={{ isLoading, refetch, scrollY, sortByElement, setLimit }} />
      )}
    </SafeAreaView>
  );
};
export default Search;

ViewSearchAnimated 组件：

const ViewSearchAnimated = ({ state: { refetch, getLocationAsync, scrollY, heightView } }) => {


  const translateY = Animated.diffClamp(scrollY, 0, heightView).interpolate({
    inputRange: [0, heightView], // should be heightview but issue on ios
    outputRange: [0, -heightView],
  });

  return (
    <Animated.View
      style={[
        styles.animateMyView,
        { height: heightView, width: "100%", transform: [{ translateY }] },
      ]}
    >
   *Additional code of the view...*
    
    </Animated.View>
  );
};

SearchList 组件（平面列表）：

const SearchList = ({ state: { isLoading, refetch, scrollY, setLimit, sortByElement } }) => {



  return (
    <FlatList
      data={sortByElement}
      bounces={false}

      keyExtractor={(data) => data?.id.toString()}
      onScroll={(e) => {
        scrollY.setValue(e.nativeEvent.contentOffset.y);
      }}
    />
  );
};

如您所见，我使用 diffclamp 来限制内容偏移并进行插值以动画化视图。我无法弄清楚iOS上发生了什么。是否有另一种方法可以使用该 diffclamp 并进行更一致的插值？

谢谢

标签： react-nativeexporeact-animated