滚动时隐藏标题，不滚动时显示标题 React-Native答案

【问题标题】：hide header when scrolling and show header when not scrolling React-Native滚动时隐藏标题，不滚动时显示标题 React-Native
【发布时间】：2021-09-05 15:47:00
【问题描述】：

我有一个包含数据和标题的平面列表。我想在不滚动平面列表时显示标题并且在滚动时不显示它。我该怎么做？

这方面有图书馆或明确的例子吗？

谢谢

【问题讨论】：

标签： javascript react-native react-native-flatlist

【解决方案1】：

由于FlatList 继承了所有ScrollView 属性，您可以在FlatList 上使用onScrollBeginDrag 和onScrollEndDrag 事件来切换是否显示标题状态。一个简单的演示：

const Screen = () => {
  const [showHeader, setShowHeader] = useState(true);

  return (
    <View>
      {/* Your header will toggle when showHeader state changes. */}
      {/* If you are using react-navigation there is a prop called headerMode which can be used to toggle header provided by react-navigation */}
      <Header show={showHeader} />
      <FlatList
        // ...
        onScrollBeginDrag={() => setShowHeader(false)}
        onScrollEndDrag={() => setShowHeader(true)}
        // ...
      />
    </View>
  );
};

【讨论】：

我试过这个，但不实用，因为标题突然出现并且不平滑，而且当标题显示时它会偏移平面列表
我想我以前遇到过这个问题。您可以使用Animated API 来获得平滑度和翻译标题，但正如您所说，它会抵消 FlatList。为了解决这个问题，您可以在 showHeader 状态设置为 true 时在 FlatList 的 contentCotainerStyle 属性上添加一些 paddingBottom。您可能想知道您的标题高度大小，或者您可以在标题容器视图上使用 onLayout 属性，它返回它的严格高度。