React Native Circular Progress Kullanımı

Kullanılan uygulamalarda grafikler son derece önem kazandı. Kullanıcıya sayısal değerleri grafik olarak vermek hem arayüz için daha şık hemde kullanıcı deneyimini arttırdığı için nasıl kullanıldığını bilmek bizim için önemli.

Kullandığım kütüphaneye şuradan ulaşabilirsiniz.

Örneğin çıktısı şu şekilde:

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

import { Circle } from "react-native-svg";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>yusufpamukcu.com</Text>

        <AnimatedCircularProgress
          size={150}
          width={20}
          fill={60}
          tintColor="#37003C"
          padding={10}
          onAnimationComplete={() => console.log('onAnimationComplete')}
          backgroundColor="#3d587550" />


        <AnimatedCircularProgress
          size={150}
          width={20}
          fill={80}
          tintColor="#D3010D"
          padding={10}
          backgroundColor="#3d587550">
          {
            (fill) => (
              <Text>
                {"kalan süre "}
              </Text>
            )
          }
        </AnimatedCircularProgress>


        <AnimatedCircularProgress
          size={150}
          width={20}
          fill={50}
          tintColor="#FFB803"
          backgroundColor="#3d587550"
          padding={10}
          renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="#42536F" />}
        />

        <AnimatedCircularProgress
          size={120}
          width={5}
          backgroundWidth={20}
          fill={90}
          tintColor="#FFD058"
          tintColorSecondary="#ff0000"
          backgroundColor="#3d5875"
          arcSweepAngle={240}
          rotation={240}
          lineCap="round"
        />

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

import React, { Component } from 'react';

import { StyleSheet, View, Text } from 'react-native';

import { AnimatedCircularProgress } from 'react-native-circular-progress';

import { Circle } from "react-native-svg";

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

};

}

render() {

return (

<Text>yusufpamukcu.com</Text>

<AnimatedCircularProgress

size={150}

width={20}

fill={60}

tintColor="#37003C"

padding={10}

onAnimationComplete={() => console.log('onAnimationComplete')}

backgroundColor="#3d587550" />

<AnimatedCircularProgress

size={150}

width={20}

fill={80}

tintColor="#D3010D"

padding={10}

backgroundColor="#3d587550">

{

(fill) => (

<Text>

{"kalan süre "}

</Text>

)

}

</AnimatedCircularProgress>

<AnimatedCircularProgress

size={150}

width={20}

fill={50}

tintColor="#FFB803"

backgroundColor="#3d587550"

padding={10}

renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="#42536F" />}

<AnimatedCircularProgress

size={120}

width={5}

backgroundWidth={20}

fill={90}

tintColor="#FFD058"

tintColorSecondary="#ff0000"

backgroundColor="#3d5875"

arcSweepAngle={240}

rotation={240}

lineCap="round"

</View>

);

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

});

React Native Circular Progress Kullanımı

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et