# @fanchenbao/react-native-scroll-indicator 中文文档 规范地址：https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/ 版本：0\.4\.0 npm 元数据更新时间：2024-08-22T21:58:02.710Z 中文译文更新时间：2026-11-14T09:42:09.068Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40fanchenbao/react-native-scroll-indicator 原文对照：https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/?lang=original 项目主页：https://github.com/FanchenBao/react-native-scroll-indicator#readme 源码仓库：https://github.com/FanchenBao/react-native-scroll-indicator ## 关键信息（来自 npm 元数据） - 包体积（解压后）：123 kB，31 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>= 16\.0\.0 - 运行依赖：0 个 - peer 依赖：react \*，react-native \* - 首次发布：2023-02-14T04:30:41.660Z - 最新版本发布：2024-08-22T21:58:02.532Z - 近 30 天下载量：8763（2026-10-14 至 2026-11-12，npm 官方下载统计） - 已发布版本数：7（近 12 个月 0 个） ## 中文简介 一个为 ScrollView 和 FlatList 提供自定义滚动索引的回放本地组件 ## 安装 ```sh npm install @fanchenbao/react-native-scroll-indicator ``` 也可以使用：`pnpm add @fanchenbao/react-native-scroll-indicator`、`yarn add @fanchenbao/react-native-scroll-indicator`、`bun add @fanchenbao/react-native-scroll-indicator` ## README # @fanchenbao/ react-native-scroll-指标 反应- 内在组件, 为 ScrollView 和 FlatList 提供一个自定义的滚动指标 ## 免责声明 针对可滚动组件上滚动的动画滚动指示器的想法借用自 [普利亚大人的回答](https://stackoverflow.com/a/57839837/9723036)。 。 。 . ## 为什么我们需要另一个自定义的卷轴指示器? 如果您在 npm 上搜索到反应本地卷轴指示器, 已有超过 10 个软件包 。 与这些计划相比,这一一揽子计划有以下优势: - 支持 : - 两者 `ScrollView` 财务报告和审定财务报表 `FlatList` - 纵向和横向滚动 - 当用户滚动到边缘以外时, iOS 中的指标缩小 - `inverted={true}` 内 `FlatList` - 指标定制就像常规 `View` (如颜色,宽度,位置等) - 可拖动指标( R)_在v.3.0中添加_(中文(简体) ) - 有全面实例的详细文件 - 指标的动画逻辑在源代码中有很好的记载. ## 安装 ```sh npm install @fanchenbao/react-native-scroll-indicator ``` ## 使用量 ### 滚动视频指示器 ```js import * as React from 'react'; import {View, Text} from 'react-native'; import {ScrollViewIndicator} from '@fanchenbao/react-native-scroll-indicator'; const App = () => { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus nisl egestas, auctor mi pulvinar, aliquam metus. Nunc porttitor quam molestie tempor laoreet. Sed vitae ex vitae turpis convallis accumsan. Fusce consequat quis nisi sed lacinia. Nullam quis condimentum tellus. Donec ornare quam sit amet tempor imperdiet. Proin condimentum leo quis ipsum pretium ornare facilisis eget nunc. Pellentesque orci purus, pellentesque et nisl at, varius molestie nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam ante nulla, sagittis vitae ante id, dignissim vestibulum ligula. Mauris iaculis nisi sed sapien finibus, sed pharetra risus rutrum. Cras laoreet mattis egestas. Pellentesque feugiat accumsan ultricies. Nullam viverra sapien nec tellus commodo aliquet. Integer faucibus quam sed nibh congue, at cursus risus vulputate. Morbi commodo mollis tempus. ); }; export default App; ``` ![Minimal ScrollView Demo](https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/docs/minimal_scrollview.gif) ### 平面显示器 ```js import * as React from 'react'; import {View, Text} from 'react-native'; import {FlatListIndicator} from '@fanchenbao/react-native-scroll-indicator'; const App = () => { return ( ( ), data: [ 'Druid', 'Sorceress', 'Paladin', 'Barbarian', 'Necromancer', 'Assassin', 'Amazon', ], renderItem: ({item}) => ( {item} ), }} horizontal={true} position="bottom" indStyle={{width: 30}} containerStyle={{borderWidth: 1, borderColor: 'black'}} /> ); }; export default App; ``` ![Minimal FlatList Demo](https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/docs/minimal_flatlist.gif) ## 综合实例 [**尝尝在小吃博览会上**](https://snack.expo.dev/@fanchenbao/react-native-scroll-indicator_demo) 综合的例子利用了卷轴指示器的自定义性. 下文简要介绍每个选项的相应道具。 详见"道具"表. - 水平 : `horizontal={true}` - 垂直数 : `horizontal={false}` - 左边 : `position="left"` - 对: `position="right"` - 顶: `position="top"` - 底部 : `position="bottom"` - 20点: `position={20}` - 50岁: `position={50}` - 80岁: `position={80}` - 常规 : `indStyle={backgroundColor: 'grey', width: 5}` - 疯狂: `indStyle={backgroundColor: 'red', width: 40}` ![Comprehensive Demo](https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/docs/comprehensive.gif) ## 运行综合示例 下载此 repo ```sh git clone https://github.com/FanchenBao/react-native-scroll-indicator.git ``` 转到 `example` 文件夹和设置示例应用程序 ```sh npm install ``` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}当里面出现 `example` 文件夹, 运行 iOS 的应用程序 ```sh npm run ios ``` 或类固醇 ```sh npm run android ``` 示例应用程序运行于 [`./example/App.tsx`](https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/example/App.tsx) ## 道具 | 道具 | 类型 | 默认 | 说明 | | --- | --- | --- | --- | | 水平 | 布尔 | `false` | 如果虚假,则垂直滚动. 如果真实, 横向滚动 . | | 职位 | 字符串 qq 数字 | `''` | 指标的理想位置。 一个可以提供"左"或"右"来进行垂直滚动,在这种情况下,指示器会被放入视图的左或右边缘. 横向滚动的"上"或"下"也一样. 此外,人们还可以提供一个数字,这个数字表明在观点中,指标的中线(沿着滚动方向)将位于何处. 譬如说, `position={20} horizontal={false}` 将指示器的中线设置在左边缘20%的视图宽度. `position={80} horizontal={true}` 将指示器的中线设置在 80% 的视图高度 从它的顶端。 如果该指示器的厚度太大,以至于如果其中心线被放置在所期望的位置上,则指示器会溢出到边缘外去,位置会自动被夹住以确保不会溢出. 这在选择"疯狂"选项时的综合性例子中得到了证明. 如果提供了空字符串,该位置将被自动指定给 `"right"` 如果垂直滚动,或 `"bottom"` 如果横向滚动. | | 持续滚动栏 | 布尔 | `false` | 如果错误,滚动指示器不会显示内容是否适合视图. 如果是真的,滚动指示器会在所有情况下显示. | | indStyle 系统 | 视图样式 | `{backgroundColor: 'grey', width: 5}` | 卷轴指示器的样式。 卷轴指示器只是一个 `Animated.View`因此,任何改变一种 `View` 可以潜在地修改滚动指示器的外观。 请注意: `width` 指指示器的长度,即垂直滚动的宽度,而水平滚动的高度. `borderRadius` 值将从 `width` 使其圆形的道具(即: `width`如果不是被推翻的话。 请不要指定以下道具,因为这些道具将被覆盖,不会产生任何效果: `position`, (中文(简体) ), `height`, (中文(简体) ), `transform`。 。 。 . | | 滚动视图 | 滚动视图 | `{}` | `ScrollViewIndicator` 只有这个 传球给基础 `ScrollView`。 。 。 . 请不要通过以下道具,因为它们会被覆盖,不会有任何效果: `horizontal`, (中文(简体) ), `showsVerticalScrollIndicator`, (中文(简体) ), `showsHorizontalScrollIndicator`, (中文(简体) ), `onContentSizeChange`, (中文(简体) ), `scrollEventThrottle`。 。 。 . 请注意: `onScroll` 财务报告和审定财务报表 `onLayout` 允许(_更新于v. 4.0_) (中文(简体) ). | | 平面列表选项 | 滚动ViewProps & FlatList 程序 | **所需经费** | `FlatListIndicator` 只有这个 传球给基础 `FlatList`。这是必需的道具,因为必须提供 `data` 财务报告和审定财务报表 `renderItem` 改为 `FlatList`。 。 。 . 请不要通过以下道具,因为它们会被覆盖,不会有任何效果: `horizontal`, (中文(简体) ), `showsVerticalScrollIndicator`, (中文(简体) ), `showsHorizontalScrollIndicator`, (中文(简体) ), `onContentSizeChange`, (中文(简体) ), `scrollEventThrottle`。 。 。 . 请注意: `onScroll` 财务报告和审定财务报表 `onLayout` 允许(_更新于v. 4.0_) (中文(简体) ). | | 容器样式 | 视图样式 | `{}` | 具有滚动指示器和可滚动组件的母容器的样式(_更新于v. 4.0_) (中文(简体) ). | ## 限制 该套装旨在替代 `ScrollView` 财务报告和审定财务报表 `FlatList` 在最基本的用途下 因此,尽管允许任何道具从 `ScrollView` 财务报告和审定财务报表 `FlatList` 改为: `ScrollViewIndicator` 财务报告和审定财务报表 `FlatListIndicator`,该套件并未对所有道具的组合进行充分测试. 某些道具组合很可能会打破自定义卷轴指示器. 如果发生这种情况,请在GitHub上提出一个问题或提出一个特征请求. ## 捐款 见 [贡献指南](https://npmcn.com/package/%40fanchenbao/react-native-scroll-indicator/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献. ## 许可证 麻省理工学院 * * * 制造的 [创建- 反应- 本土- 图书馆](https://github.com/callstack/react-native-builder-bob) ## 常见问题 ### @fanchenbao/react-native-scroll-indicator 是什么？ 一个为 ScrollView 和 FlatList 提供自定义滚动索引的回放本地组件 ### 如何安装 @fanchenbao/react-native-scroll-indicator？ 在项目目录运行 npm install @fanchenbao/react-native-scroll-indicator，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @fanchenbao/react-native-scroll-indicator 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @fanchenbao/react-native-scroll-indicator 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @fanchenbao/react-native-scroll-indicator 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>= 16\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @fanchenbao/react-native-scroll-indicator 可以商用吗？ @fanchenbao/react-native-scroll-indicator 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @fanchenbao/react-native-scroll-indicator 的下载量有多少？ 根据 npm 官方下载统计，@fanchenbao/react-native-scroll-indicator 在 2026/10/14 – 2026/11/12 这 30 天内被下载 8,763 次，日均约 292 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @fanchenbao/react-native-scroll-indicator 还在维护吗？ 最新版本 0\.4\.0 发布于 2024/08/23（2 年前）；至今共发布 7 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/02/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。