# react-native-scrollable-topbar

> 基于React Native封装的资讯频道切换TopBar

Latest version **1.0.1** (published 2018-09-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-scrollable-topbar
pnpm add react-native-scrollable-topbar
yarn add react-native-scrollable-topbar
bun add react-native-scrollable-topbar
```

## 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.1 |
| Published | 2018-09-20 |
| First published | 2018-09-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fantao.meng |
| Maintainers | mengft |
| Keywords | React Native, react-native-scrollable-topbar, ScrollTopBar |

## Links

- npm: https://www.npmjs.com/package/react-native-scrollable-topbar
- Repository: https://github.com/mengft/react-native-scrollable-topbar
- Homepage: https://github.com/mengft/react-native-scrollable-topbar#readme
- Issues: https://github.com/mengft/react-native-scrollable-topbar/issues
- npm.io page: https://npm.io/package/react-native-scrollable-topbar

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.4.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [react-native](https://npm.io/package/react-native.md) 0.56.0

## Recent versions

- 1.0.1 (latest) — 2018-09-20
- 1.0.0 — 2018-09-19

## README

# react-native-scrollable-topbar
基于React Native封装的资讯频道TopBar

## Installation

```bash
npm install react-native-scrollable-topbar --save
```
```bash
yarn add react-native-scrollable-topbar --save
```

## Import into your project
```js
import ScrollTopBar from "react-native-scrollable-topbar";
```

## Examle useage

```js
<ScrollTopBar
  topBarUnderlineStyle={{}}				                                                    // 下划线样式
  labelList={['推荐', '军事', '政治', '财经', '娱乐', '社会', '生活', '美食', '旅行']}			// 标题栏素材
  topBarInactiveTextColor={Colors.C5}		                                              // label 文字非选中颜色
  topBarActiveTextColor={Colors.CB}		                                                // label 文字选中颜色
  topBarBackgroundColor={Colors.C8}		                                                // 背景颜色
>
  {['推荐', '军事', '政治', '财经', '娱乐', '社会', '生活', '美食', '旅行'].map((e, i) => 
      <ArticleList key={i} index={i} navigation={this.props.navigation} /> 
  )}
</ScrollTopBar>

```

## Properties
属性  | 描述    | 类型  | 默认    
------ | ------ | ------  | ------
topBarUnderlineStyle  | 下划线样式 | ```PropTypes.oneOfType([ ViewPropTypes.style, PropTypes.number ]) ``` | ``` { backgroundColor: '#298eff', height: 4, width: 60, marginTop: -4 } ```
labelList | 频道列表  | ``` PropTypes.array ``` | ['推荐', '军事', '政治', '财经', '娱乐', '社会', '生活', '美食', '旅行']  
topBarInactiveTextColor | 非活跃频道文字颜色  | ``` PropTypes.string ```  | '#aab9ca' 
topBarActiveTextColor | 活跃频道文字颜色  | ``` PropTypes.string ```  | '#298eff' 
topBarBackgroundColor | 背景颜色  | ``` PropTypes.string ```  | '#54657e'

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