D3 + svg это через ART?

Question

React Native — русскоговорящее сообщество

AMar4enko

D3 + svg это через ART?

#mobile #programming #reactnative #russian

0

29.08.2019

1 ответов

7 просмотров

Никита Сироткин · Accepted Answer

// @flow import { arc } from 'd3-shape'; import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import Svg, { Path } from 'react-native-svg'; import { LIGHT_FONT, REGULAR_FONT, } from '../resources/constants'; type Props = { size: number, progress: number, color: string, text: string, notFilledColor: string, }; const styles = StyleSheet.create({ smallText: { fontFamily: REGULAR_FONT, fontSize: 13, fontWeight: 'normal', fontStyle: 'normal', letterSpacing: 0, textAlign: 'center', color: '#919193', }, absolute: { position: 'absolute', }, container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontFamily: LIGHT_FONT, fontSize: 29, fontWeight: '300', fontStyle: 'normal', letterSpacing: 0, textAlign: 'center', color: '#000000', }, }); export default class CircleProgress extends React.PureComponent<Props> { static defaultProps = { notFilledColor: '#f5f5f7', }; render() { const { size, text, color, progress, notFilledColor, } = this.props; const realProgress = Number.isNaN(progress) ? 0 : Math.max(0, Math.min(1, progress)); const r1 = (size / 2) - 4; const r2 = size / 2; const backgroundPath = arc() .innerRadius(r1) .outerRadius(r2) .startAngle(0) .endAngle(realProgress * 2 * Math.PI); const backgroundPath2 = arc() .innerRadius(r1) .outerRadius(r2) .startAngle(0) .endAngle(2 * Math.PI); return ( <View style={[{ width: size, height: size }, styles.container]}> <View style={styles.absolute}> <Svg height={size} width={size} > <Path d={backgroundPath2()} fill={notFilledColor} x={size / 2} y={size / 2} /> <Path d={backgroundPath()} fill={color} x={size / 2} y={size / 2} /> </Svg> </View> <Text style={styles.text}> {Math.round(realProgress * 100)}% </Text> <Text numberOfLines={1} style={styles.smallText} > {text} </Text> </View> ); } }

169 похожих чатов

D3 + svg это через ART?

1 ответов

Похожие вопросы