Всем привет, сегодня я хочу поделиться, как сделать диаграмму с помощью react-native.
- Сначала вам нужно создать проект
react-native-init ChartProject
- Убедитесь, что ваши приложения работают
react-native run-android
(Android) илиreact-native run-ios
(iOS) - Затем установите диаграмму npm, в данном случае я использую response-native-charts-wrapper
npm install --save react-native-charts-wrapper
, не забудьте связать этуreact-native link react-native-charts-wrapper
- После установки response-native-charts-wrapper
для Android: откройте Android Studio, добавьте код в android / build.gradle maven { url: “https://jitpack.io"
для iOS: откройте Терминал, перейдите в каталог, содержащий ChartProject. Затем введите следующую команду pod init
. Затем отредактируйте свой Podfile с помощью этой команды open -e Podfile
и добавьте этот код
Сохраните отредактированный подфайл, затем запустите команду pod install
и дождитесь ее завершения. После этого откройте RNChart - ›ios -› RNChart.xcworkspace, он будет открыт Xcode.
Перетащите ReactNativeCharts в RNCharts.xcworkspace, затем выберите Создать группы.
Создайте заголовок briding Objective C, дайте ему имя RNChart-Briding-Header.h
Отредактируйте свой RNChart-Briding-Header.h
Добавьте свой RNChart-Bridging-Header.h в Настройки сборки - ›Общий компилятор Swift
Проверьте Этапы сборки- ›Источник компиляции, добавьте все файлы .m и .swift из ReactNativeCharts
5. Хорошо, приступим к кодированию. У меня есть данные из службы с json, и я записываю их в свой код, вот
6 . Круговая диаграмма. Это код для создания круговой диаграммы.
7 . Гистограмма. это код для создания гистограммы с несколькими условными обозначениями.
8. Линейная диаграмма. Это код для создания линейной диаграммы.
9. Результат для круговой диаграммы, гистограммы и линейной диаграммы.
Вы можете проверить полный код здесь. Спасибо