Здравейте всички! За мен е удоволствие да създам първата си публикация в Medium. Знаеш ли какво? Чувствам се добре! Мислех да го направя преди много време и най-накрая го правя днес. Моята собствена революция.
В тази публикация бих искал да започна малък урок за изграждане на линейна диаграма на React Native. Знаете ли какво е линейната графика, нали? За всеки случай ви показвам:
Да, изглежда красиво, нали? Въпросът е: Как мога да го изградя върху приложение React Native? Е… Това е причината да съм тук. Повярвайте ми, лесно е!
Първо, бих искал да споделя пакет от npm, наречен react-native-chart-kit. Това е перфектна и проста javascript библиотека, използваща React Native, за да създадете своя собствена графика.
Предполагам, че вече имате свой собствен проект React Native. Така че, нека пропуснем тази стъпка.
Да започваме!
yarn add react-native-chart-kityarn add react-native-svg prop-typesинсталиране на партньорски зависимости
Свършен? Добре, втора стъпка: Импортиране на LineChar.
import { LineChart} from "react-native-chart-kit";
Добре. Всичко е инсталирано и импортирано. Звучи добре!
Следващата стъпка е използването на компонента LineChart и създаването на вашите макетни данни.
const labels = [ 'Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', ]; const data = [ Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, ];
и сега, използвайки компонента Линейна диаграма:
<LineChart
data={{ labels: labels,
datasets: [{ data: data }],}}
width={Dimensions.get('window').width - 50}
height={220}
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#D9D9D9',
backgroundGradientTo: '#FFF',
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: { borderRadius: 16, },
propsForDots: { r: '6', strokeWidth: '2', stroke: '#ffa726', }, }}
bezier
style={{ marginVertical: 5, borderRadius: 15, }}
/>
Какво имаме тук?
Първо най-важното. Разбира се, трябва да импортираме и използваме нашия LineChart като компонент. Но каква е тази информация? Добре, нека обясня:
const labels = ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6"];
Както означава името, трябва да използваме масив със стойностите като етикет в графиката. Така че в този пример това е масив с някои стойности.
Какво ще кажете за данните?
const data = [ Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100 ];
Хъм… но каква е тази функция Math.random()?
Math.random() * 100); // returns a random integer from 0 to 99
По принцип създаваме масив с 6 произволни числа. Както казах преди, ние използваме фиктивни данни. Идеята е да се създаде линейна графика с произволни числа, просто за да бъде дидактична.
Много добре! Но имаме нужда от повече!
import { Dimensions } from 'react-native';
Нека импортираме Dimensions от React Native, за да изчислим ширината на устройствата и да го използваме, за да бъде винаги отзивчив.
width={Dimensions.get("window").width}
и за създаване на определена височина:
height={220}
Добре, още малко. Конфигурации на графиката:
chartConfig={{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#D9D9D9',
backgroundGradientTo: '#FFF',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: { borderRadius: 16, },
propsForDots: { r: '6', strokeWidth: '2', stroke: '#ffa726', },
}}
Ако сте запознати с JSX стилове или дори CSS, можете да видите, че имаме конфигурация на JSX стил: цвят на фона, цвят и стил.
Това е лесно!
propsForDots? Просто задайте стила за всяка точка в графиката, като ширина на линията и r.
Тогава имаме:
bezier
style={{ marginVertical: 8, borderRadius: 16 }}
Безие?
Дефинира функцията за цвят на точките, която се използва за изчисляване на цветовете на точките в линейна диаграма. Булева е, така че просто задайте true или false. В този случай просто задайте true, без аргументи.
и накрая, относно реквизитите за стил, както знаете, това са само реквизити за задаване на граница за компонент и borderRadius, за да стане красива джаджа =)
Добре, направихме.
Ако искате да проверите пълния източник в Github.
Моля, не се колебайте да го изтеглите (или да направите заявка за сливане, защо не?)
