react-native-time-pie

运行效果

添加依赖

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

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

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

安装和使用

1. 使用npm安装:

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

2. 导入组件:

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

3. 使用组件:

...
  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 (
      <View style={styles.container}>
        <Pie 
          data={pieData}
        />
      </View>
    );
  }
...

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
});