https://github.com/xinlc/react-native-time-pie

Pie chart with time
https://github.com/xinlc/react-native-time-pie

pie react-native-component time

Last synced: 3 months ago
JSON representation

Pie chart with time

• Host: GitHub
• URL: https://github.com/xinlc/react-native-time-pie
• Owner: xinlc
• License: mit
• Created: 2018-04-13T10:37:50.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-30T03:11:10.000Z (about 7 years ago)
• Last Synced: 2025-02-21T21:04:41.008Z (4 months ago)
• Topics: pie, react-native-component, time
• Language: JavaScript
• Homepage:
• Size: 352 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# react-native-time-pie

[![npm package](https://img.shields.io/npm/v/react-native-time-pie.svg?style=flat-square)](https://www.npmjs.org/package/react-native-time-pie)

[![npm downloads](https://img.shields.io/npm/dt/react-native-time-pie.svg)](https://www.npmjs.com/package/react-native-time-pie)

## 运行效果

![](./docs/ios.jpeg)

![](./docs/android.jpeg)

## 添加依赖

Android默认就包含ART库，IOS需要单独添加依赖库。

1. 使用xcode中打开react-native中的ios项目，选中`Libraries`目录 ——> 右键选择`Add Files to 项目名称` ——> `node_modules/react-native/Libraries/ART/ART.xcodeproj` 添加；

![](./docs/ios1.jpeg)

2. 选中项目根目录 ——> 点击`Build Phases` ——> 点击`Link Binary With Libraries` ——> 点击左下方`+` ——> 选中`libART.a`添加。

![](./docs/ios2.jpeg)

## 安装和使用

1. 使用`npm`安装:

```bash

$ npm install --save react-native-time-pie

```

2. 导入组件:

```js

import Pie from 'react-native-time-pie';

```

3. 使用组件:

```js

...

  render() {

    const foo = { startTime: '08:00', endTime: '11:00', fillColor: 'green' };

    const bar = { startTime: '20:00', endTime: '23:30', fillColor: 'blue' };

    const pieData = [foo, bar];

    return (

      

        

      

    );

  }

...

const styles = StyleSheet.create({

  container: {

    flex: 1,

    padding: 30,

    justifyContent: 'center',

    alignItems: 'center',

  },

});

```