Использование react-native и получение данных с помощью Axios.

Обязательно ознакомьтесь с некоторыми советами по зарабатыванию денег в качестве программиста.

React Native — отличный способ создавать гибридные приложения. Но отсутствие ограничений в нашем бэкэнд-отделе означает, что мы можем использовать наши собственные веб-API для встроенного node.js или PHP.

В этой статье мы обсудим, как мы можем использовать простой метод доступа к базе данных для извлечения данных с помощью запроса на получение. Кроме того, мы собираемся использовать внешнюю библиотеку, известную как Axios. Итак, без лишних слов, давайте начнем создавать приложение.

Добавление Axios в ваш проект

Для установки Axios откройте терминал или командную строку и введите следующее: —

Использование нпм:

$ npm install axios

Использование беседки:

$ bower install axios

для дальнейшего описания или документов перейдите к

СТРУКТУРА ПРИЛОЖЕНИЯ

Я рекомендую использовать VS Code для react-native, так как у них есть множество расширений и встроенный терминал. Первый раз Майкрософт сделал что-то не глючное(без обид). Приложение довольно простое, с простым экраном, который извлекает данные.

Код Php представляет собой простой приемник запроса GET и выводит некоторые данные.

Далее у нас будет 4 столбца данных

идентификатор, имя, история и дата

Ниже приведен файл PHP

<?php
//connection 
$con=mysqli_connect("localhost","/*database username*/","/*database password*/","/*database name*/") or die(mysqli_error($con));
$query ="SELECT * FROM dummy ORDER BY date DESC ";
// query execution
$result = mysqli_query($con,$query);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$result1[]=array('story'=>$row);
}
$decoded=json_encode($result1);
print_r($decoded);
} else {
echo "0 results";
}
$con->close();
?>

Настройка реакции

У нас будет геттер-файл отдельно от файла, в который мы будем выводить данные. Файл-геттер просто сделает запрос и передаст JSON в качестве реквизита, где мы сопоставим данные в список. Вместо этого вы можете использовать ListView, это делает процесс быстрее и предпочтительнее для обработки больших данных.

1. экран //выборщик
2. style_data//дисплей

1.скрин

Данные, которые мы собираемся получить, должны быть сохранены как переменная состояния, здесь мы назовем ее stories[]. Функция get() в Axios имеет ответ, который срабатывает, как только сервер возвращает какие-либо данные или ошибку.

мы используем функцию карты для передачи данных JSON в качестве реквизита,

Вы можете получить сообщение об ошибке, если не поместите ключ в карту, поскольку он использовался для идентификации каждых данных, поэтому он должен быть уникальным. Следовательно, передайте ключ как что-то вроде идентификатора или случайно сгенерированного числа для больших полей данных.

import React from 'react';
import {View,Text} from 'react-native';
import CardStory from './sṭyle_data'
import axios from 'axios'
export default class Story_Card extends React.Component {
state={story:[]}
componentDidMount() {
axios.get('**your site or any api***').then(response =>this.setState({story:response.data}));
}
render_story(){
return this.state.story.map(story =>
<CardStory  key={story.story.id} story={story}/>)
}
render() {
// console.log(this.state)
return (
<View>
{this.render_story()}
</View>
);
}
}

2. Style_data

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

import React from 'react';
import {View,Text} from 'react-native';
const CardStory =(props)=>{
return(
<View
style={{
borderRadius:2,
padding:20,
marginLeft:20
}}>
<Text style={{ fontSize:20}}>
{props.story.story.name}
</Text>
<Text style={{fontSize:10}} >
{props.story.story.date}
</Text>
<Text style={{ fontSize:14}}>
{props.story.story.story}
</Text>
</View>
)
}
export default CardStory;

Финальная задача

Просто импортируйте экран в App.js, и ваше приложение-геттер должно запуститься.

Итак, шаги, чтобы подытожить ..

1. Создайте свой собственный API/или вызовите внешний
2. Вызвать файл через Axios get req и передать ответ как в реквизите
3. стиль данных в файле style_data
4. импортируйте экран и запустите код

Конечный результат

Заголовок представляет собой простое представление с цветным фоном и смещением. Строка состояния должна скрываться в onComponentmount().