什么是 react-native-fixed-header-scroll-view
在 React Native 的开发中，我们都会遇到需要滑动展示大量数据的情况，但是滑动的时候会出现头部的闪动或者头部不跟随滑动等问题。这个时候，我们可以使用 react-native-fixed-header-scroll-view 这个npm包来解决这种问题。
react-native-fixed-header-scroll-view 是一个带有固定头部的可滚动组件，可以在组件的滚动过程中固定头部，使头部始终显示在屏幕顶部，无论屏幕滚动到哪里。
如何安装 react-native-fixed-header-scroll-view
安装 react-native-fixed-header-scroll-view 可以使用 npm 命令安装，在命令行中输入下面的命令即可。
npm install react-native-fixed-header-scroll-view --save
如何使用 react-native-fixed-header-scroll-view
1.首先在项目中导入 react-native-fixed-header-scroll-view 组件
import FixedHeaderScrollView from "react-native-fixed-header-scroll-view";
2.定义数据，定义头部组件和列表组件
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ----- ----------- --------- ---- ---------------
----- ------------------------- ------- --------- -
------------------ -
-------------
---------- - -
----- --
-
-
------------------- -
---------------
----- -
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ---- ----- -------
---- ----- ----- --------
-
--
-
-------- -
------ -
----- -------------------------
----- ----------------------
----- --------------------------------------
-------
----------------------
-----------------
--------------------
----------------------
------------------- ------- -- -
----- --------------------
------------------------
-------
--
--
-------
-
-
-
----- ------ - -------------------
---------- -
----- --
--
------- -
------- ---
--------------- ---------
----------- ---------
---------------- ---------
--
------------ -
--------- ---
------ ------
--
----- -
------- ---
--------------- ---------
----------- ---------
------------------ --
------------------ ------
-
---3.组件属性说明
- headerHeight: number类型，头部高度，必填项；
- fixedHeader：任意类型，头部固定视图，必填项；
- data: array类型， FlatList 的 data 属性，必填项；
- renderItem: function类型，FlatList 的 renderItem 属性，必填项；
- ...FlatListProps: 如果需要配置 FlatList 的其他属性，可以直接传递对应的属性。
总结
使用 react-native-fixed-header-scroll-view 可以方便地实现一个带有固定头部的可滚动列表。本文介绍了该组件的安装方法以及使用方法，并使用示例代码说明了具体的实现过程。相信大家在阅读本文后，对于该组件已经有了初步的了解，也对如何实现固定头部的滑动列表有了更深入的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea881e8991b448dc0ff