React Native: создание диаграмм и графиков для приложения React Native

У меня есть проект, в котором нужно создать представление диаграммы в мобильном приложении. Я исследовал некоторые библиотеки, но до сих пор не могу найти никакого решения. Кто-нибудь знает, что какая-то хорошая библиотека работает на React Native? пожалуйста, дайте мне знать, заранее спасибо!

Схема и график - неоднозначные термины. Вы ищете гистограммы или диаграммы узловых ребер?

Sebastian 31.03.2021 09:42

Графическая поддержка для react-native очень плохая, особенно для интерактивной графики. Это связано с абстракцией платформы и отсутствием низкоуровневого графического слоя. Следовательно, будет сложно найти что-либо нестатичное.

Sebastian 31.03.2021 09:43

Привет, @Sebastian, спасибо за помощь. Я ищу диаграммы узловых ребер. Знаете ли вы, есть ли какие-либо библиотеки для реагирования, которые могут создавать диаграммы, такие как JointJS?

AD. Tran 06.04.2021 11:38
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
3
20
1

Ответы 1

Я нашел эту библиотеку

https://www.npmjs.com/package/react-native-svg-charts

Сначала установите эту библиотеку

npm i react-native-svg-charts
npm i react-native-svg

Второй

cd ios
pod install

Создайте новый экран вот так,

import React from 'react';
import {BarChart, XAxis} from 'react-native-svg-charts';
import {View} from 'react-native';
import * as scale from 'd3-scale';

class App extends React.PureComponent {
  render() {
    const data = [14, 80, 100, 55];

    return (
      <View
        style = {{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <View
          style = {{
            height: 200,
            width: '80%',
          }}>
          <BarChart
            style = {{flex: 1}}
            data = {data}
            gridMin = {0}
            svg = {{fill: 'rgb(134, 65, 244)'}}
          />
          <XAxis
            style = {{marginTop: 10}}
            data = {data}
            scale = {scale.scaleBand}
            formatLabel = {(value, index) => index}
            labelStyle = {{color: 'black'}}
          />
        </View>
      </View>
    );
  }
}

export default App;

Другие вопросы по теме