@fanchenbao/ react-native-scroll-指标

反应- 内在组件, 为 ScrollView 和 FlatList 提供一个自定义的滚动指标

免责声明

针对可滚动组件上滚动的动画滚动指示器的想法借用自 普利亚大人的回答。 。 。 .

为什么我们需要另一个自定义的卷轴指示器?

如果您在 npm 上搜索到反应本地卷轴指示器, 已有超过 10 个软件包 。 与这些计划相比,这一一揽子计划有以下优势:

• 支持 :
  • 两者 ScrollView 财务报告和审定财务报表 FlatList
  • 纵向和横向滚动
  • 当用户滚动到边缘以外时, iOS 中的指标缩小
  • inverted={true} 内 FlatList
  • 指标定制就像常规 View (如颜色,宽度,位置等)
  • 可拖动指标( R)在v.3.0中添加(中文(简体) )
• 有全面实例的详细文件
• 指标的动画逻辑在源代码中有很好的记载.

安装

npm install @fanchenbao/react-native-scroll-indicator

使用量

滚动视频指示器

import * as React from 'react';
import {View, Text} from 'react-native';
import {ScrollViewIndicator} from '@fanchenbao/react-native-scroll-indicator';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <View style={{height: '30%', width: '80%'}}>
        <ScrollViewIndicator
          indStyle={{backgroundColor: 'green'}}
          containerStyle={{
            borderWidth: 1,
            borderColor: 'black',
          }}
        >
          <View>
            <Text>
              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.
            </Text>
          </View>
        </ScrollViewIndicator>
      </View>
    </View>
  );
};

export default App;

平面显示器

import * as React from 'react';
import {View, Text} from 'react-native';
import {FlatListIndicator} from '@fanchenbao/react-native-scroll-indicator';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <View
        style={{
          height: '10%',
          width: '80%',
        }}
      >
        <FlatListIndicator
          flatListProps={{
            ItemSeparatorComponent: () => (
              <View style={{width: 1, backgroundColor: 'blue'}} />
            ),
            data: [
              'Druid',
              'Sorceress',
              'Paladin',
              'Barbarian',
              'Necromancer',
              'Assassin',
              'Amazon',
            ],
            renderItem: ({item}) => (
              <View style={{justifyContent: 'center', padding: 10}}>
                <Text>{item}</Text>
              </View>
            ),
          }}
          horizontal={true}
          position="bottom"
          indStyle={{width: 30}}
          containerStyle={{borderWidth: 1, borderColor: 'black'}}
        />
      </View>
    </View>
  );
};

export default App;

综合实例

尝尝在小吃博览会上

综合的例子利用了卷轴指示器的自定义性. 下文简要介绍每个选项的相应道具。 详见"道具"表.

• 水平 : 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}

运行综合示例

下载此 repo

git clone https://github.com/FanchenBao/react-native-scroll-indicator.git

转到 example 文件夹和设置示例应用程序

npm install

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}当里面出现 example 文件夹, 运行 iOS 的应用程序

npm run ios

或类固醇

npm run android

示例应用程序运行于 ./example/App.tsx

道具

限制

该套装旨在替代 ScrollView 财务报告和审定财务报表 FlatList 在最基本的用途下 因此,尽管允许任何道具从 ScrollView 财务报告和审定财务报表 FlatList 改为: ScrollViewIndicator 财务报告和审定财务报表 FlatListIndicator,该套件并未对所有道具的组合进行充分测试. 某些道具组合很可能会打破自定义卷轴指示器. 如果发生这种情况,请在GitHub上提出一个问题或提出一个特征请求.

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

制造的 创建- 反应- 本土- 图书馆