# react-native-stiky-scrollview

> react-native可吸顶的ScrollView

Latest version **1.0.5** (published 2020-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-stiky-scrollview
pnpm add react-native-stiky-scrollview
yarn add react-native-stiky-scrollview
bun add react-native-stiky-scrollview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-01-17 |
| First published | 2019-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | moseszhou |
| Maintainers | moseszhou |
| Keywords | react-native, react-component, react, ios, android, sticky, ScrollView, StickyScrollView |

## Links

- npm: https://www.npmjs.com/package/react-native-stiky-scrollview
- Repository: https://github.com/moseszhou/StickyScrollView
- Homepage: https://github.com/moseszhou/StickyScrollView#readme
- Issues: https://github.com/moseszhou/StickyScrollView/issues
- npm.io page: https://npm.io/package/react-native-stiky-scrollview

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2020-01-17
- 1.0.4 — 2020-01-14
- 1.0.3 — 2020-01-02
- 1.0.2 — 2019-12-25
- 1.0.1 — 2019-12-21
- 0.0.1 — 2019-12-21

## README

# StickyScrollView
react-native可吸顶的ScrollView

# 效果
![react-native-stiky-scrollview](./screen.gif)

# install

```javascript
npm install react-native-stiky-scrollview
```

#Demo
```javascript
/**
 * StickyScrollView 这是ScrollView 
 * StickyContainer 通过这个元素包裹有需要吸顶的组件，组件内部可能还有非吸顶部分
 * StickyContent 包裹需要吸顶的部分，被包含于StickyContainer
 * 注意：RN0.59以下版本为了兼容android吸顶效果 StickyContent需要为StickyContainer的直接子元素
 * <StickyContainer><StickyContent></StickyContent></StickyContainer>
 * 或者
 * <StickyContainer><View><StickyContent></StickyContent></View></StickyContainer>
 * View 不能包含style属性
 * RN0.59+无此限制
 * StickyContent 可以设置吸顶后的背景颜色，holdBgColor,如果内容有背景色，则无效果
 * 详情见下面的代码
 */



import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { StickyContainer, StickyContent, StickyScrollView } from 'react-native-stiky-scrollview'
const colors = ["yellow", "blue", "pink", "green", "orange", "brown", "white"]
export default class stickyDemo extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <StickyScrollView>
                <View >
                    <View>
                        <Text style={styles.topHeader}>这是头部</Text>
                    </View>
                </View>
                {
                    new Array(50).fill(2).map((item, index) => {
                        if (index % 4 === 3) {
                            return this.createSectionHeader(index)
                        } else {
                            return this.createItem(index);
                        }
                    }
                    )

                }
            </StickyScrollView>
        )

    }


    createItem(index) {
        return (<View key={index} style={{ alignItems: "center", justifyContent: "center", borderColor: "#456789", borderWidth: 0.5, backgroundColor: colors[Math.floor(Math.random() * 7)], height: 50 + 200 * Math.random(), }}>
            <Text style={{ fontSize: 30 }}>
                {index}
            </Text>
        </View>)
    }

    createSectionHeader(index) {
        return (
            <StickyContainer key={index}>
                <View>
                    <Text style={{ fontSize: 30, height: 80, backgroundColor: "blue", }}>
                        Header outer {index}
                    </Text>
                    <StickyContent key={index} holdBgColor={colors[Math.floor(Math.random() * 7)]} >
                        <View style={{ zIndex: 99, alignItems: "center", justifyContent: "center", borderColor: "#456789", borderWidth: 0.5, height: 50 + 200 * Math.random(), }}>
                            <Text style={{ fontSize: 30 }}>
                                Header {index}
                            </Text>
                        </View>
                    </StickyContent>
                    <Text style={{ fontSize: 30, height: 80, zIndex: 0, }}>
                        Bottom  outer {index}
                    </Text>
                </View>
            </StickyContainer>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    topHeader: {
        height: 400,
        textAlign: "center",
    },
});
```

---
_Source: https://npm.io/package/react-native-stiky-scrollview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._