Требования к созданию приложения:
- Основное понимание языка JavaScript.
- Node.js и реагировать родной Анкет
- Используются библиотеки: момент, реагирующие, реагирующие члены.
Если вы не знакомы с этими ресурсами, не волнуйтесь – они довольно просты в использовании.
Темы, которые мы рассмотрим в посте:
- Новости API
- Fetch API
- Flat -Stiled
- Спуститься, чтобы освежить
- Связывание
И еще … так что давайте начнем! Вы можете найти полный проект репо Здесь Анкет
Простой и простой в использовании API, который возвращает метаданные JSON для заголовков и статей, живут по всей Интернете прямо сейчас. — NewsAPI.org
Во -первых, вы должны пойти дальше и подписаться на API News, чтобы получить бесплатный Apikey (ваш ключ аутентификации).
Создайте новый нативный проект React и назовите его News_App (или все, что вы хотите). В каталоге проекта сделайте новую папку и назовите ее SRC Анкет В SRC Создайте папку и имя его компоненты . Таким образом, ваш каталог проектов должен выглядеть примерно так: В папке SRC создайте новый файл под названием News.js. В этом файле мы собираемся получить JSON, который содержит заголовки из API News.
const url =
"https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY_HERE";
export async function getNews() {
let result = await fetch(url).then(response => response.json());
return result.articles;
}
Убедитесь, что вы замените Your_api_key_here с вашим собственным ключом API. Для получения дополнительной информации об API новостей, перейдите к Newsapi Docs Анкет
Теперь мы объявляем GetNews функция, которая собирается принести для нас статьи. Экспортируйте функцию, чтобы мы могли использовать ее в нашем App.js файл.
import React from 'react';
import { FlatList } from 'react-native';
// Import getNews function from news.js
import { getNews } from './src/news';
// We'll get to this one later
import Article from './src/components/Article';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { articles: [], refreshing: true };
this.fetchNews = this.fetchNews.bind(this);
}
// Called after a component is mounted
componentDidMount() {
this.fetchNews();
}
fetchNews() {
getNews()
.then(articles => this.setState({ articles, refreshing: false }))
.catch(() => this.setState({ refreshing: false }));
}
handleRefresh() {
this.setState(
{
refreshing: true
},
() => this.fetchNews()
);
}
render() {
return (
}
keyExtractor={item => item.url}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh.bind(this)}
/>
);
}
}
В конструкторе мы определяем начальное состояние. Статьи Хранит наши статьи после того, как мы их принесем, и освежающий поможет нам в анимации обновления. Заметьте, что я установил освежающий к истинный , потому что Когда мы начинаем приложение, мы хотим, чтобы анимация начала, пока мы загружаем статьи. ComponentDidMount вызывается сразу после установки компонента. Внутри это мы называем Fetchnews метод
componentDidMount() {
this.fetchNews();
}
В Fetchnews Мы называем getNews () который возвращает обещание. Итак, мы используем .потом () Метод, который принимает функцию обратного вызова, и функция обратного вызова принимает аргумент (статьи).
Теперь назначьте статьи в штате аргументу статьи. Я только напечатал Статьи Потому что это новый синтаксис ES6, который означает {статьи: статьи}, и мы устанавливаем освежающий к ложный Чтобы остановить анимацию прядильщика.
fetchNews() {
getNews().then(
articles => this.setState({ articles, refreshing: false })
).catch(() => this.setState({ refreshing: false }));
}
.catch () вызывается в отклоненных случаях.
HANDLEREFRESH Запускает анимацию Spinner и вызовите fetchnews () Анкет Мы проходим знак равно > this.fetchnews () , поэтому это называется сразу после того, как мы назначаем государство.
handleRefresh() {
this.setState({ refreshing: true },() => this.fetchNews());
}
В рендер Метод, мы возвращаем Flatlist элемент. Затем мы передаем некоторые реквизиты. данные это множество статей из это . renderitem требует функции, чтобы отображать каждый элемент в массиве, но в нашем случае он просто возвращает Статья Компонент, который мы импортировали ранее (мы доберемся до этого). И мы передаем Статья элемент как опора для использования позже в этом компоненте.
В SRC/Компоненты Создайте новый файл JavaScript и вызовите его Article.js Анкет
Начнем с установки двух простых библиотек с помощью NPM: Реактивные-коренные элементы , что дает нам несколько готовых компонентов, которые мы могли бы использовать, и момент Это справится с нашим временем.
Запустить с помощью терминала/cmd:
Установка NPM-момент реагирующих нагрузочных элементов
В статье.js:
import React from 'react';
import { View, Linking, TouchableNativeFeedback } from 'react-native';
import { Text, Button, Card, Divider } from 'react-native-elements';
import moment from 'moment';
export default class Article extends React.Component {
render() {
const {
title,
description,
publishedAt,
source,
urlToImage,
url
} = this.props.article;
const { noteStyle, featuredTitleStyle } = styles;
const time = moment(publishedAt || moment.now()).fromNow();
const defaultImg =
'https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Images-HD-Diamond-Pattern-PIC-WPB009691.jpg';
return (
Linking.openURL(url)}
>
{description || 'Read More..'}
{source.name.toUpperCase()}
{time}
);
}
}
const styles = {
noteStyle: {
margin: 5,
fontStyle: 'italic',
color: '#b2bec3',
fontSize: 10
},
featuredTitleStyle: {
marginHorizontal: 5,
textShadowColor: '#00000f',
textShadowOffset: { width: 3, height: 3 },
textShadowRadius: 3
}
};
Здесь многое происходит. Сначала мы начинаем с разрушение Статья Опора и Стили Объект определен ниже класса.
В рендер Мы определяем время хранить время, когда статья была опубликована. Мы используем момент Библиотека для преобразования даты в прошлое с тех пор, и мы передаем Опубликовано или Если Опубликовано это NULL Анкет
DefaultImg Присвоен URL -адрес изображения в случае, если URL -адрес изображения статьи составляет NULL Анкет
рендер Метод возвращает TouchablenativeFeedback (Используйте TouchablePacity Вместо этого, если он не работает на вашей платформе), чтобы обрабатывать, когда пользователь нажимает на карту. Мы передаем ему некоторые реквизиты: USEFORGRONGE который говорит элементу использовать передний план при отображении волнового эффекта на карте, и Onpress , который принимает функцию и выполняет ее, когда пользователь нажимает на карту. Мы прошли () => Linking.openurl (URL) который просто открывает URL для полной статьи, когда мы нажимаем на карту.
Карта берет три реквизита: InfeedTitle который является просто причудливым заголовком, размещенным над изображением, которое вы могли бы использовать заглавие Вместо этого, если хотите, Infeedtitlestyle Стиль его, и изображение, которое является изображением статьи из статьи. В противном случае, если это нулевой , это будет DefaultImg Анкет
..
featuredTitle={title}
featuredTitleStyle={featuredTitleStyle}
image={{ uri: urlToImage || defaultImg }}
..
Что касается Текст Элемент, он содержит описание для статьи.
Мы добавили разделитель Чтобы отделить описание от времени и имени источника.
< Divider Style = {{founalcolor: ‘#dfe6e9’}}/>
Ниже Разделитель , у нас есть Просмотр Это содержит имя источника и время, когда статья была опубликована.
.... {source.name.toUpperCase()} {time}
После класс , мы определили стили для этих компонентов.
Теперь, если мы запустим приложение: И мы можем обновить приложение Вот! Исходный код для приложения доступен на GitHub Здесь Вы можете улучшить его и сделать запрос на тягу.
Надеюсь, вам понравилась моя статья! Если у вас есть какие -либо вопросы, не стесняйтесь комментировать или добраться до меня на Twitter И я обязательно помогу:)
Также не забудьте поделиться статьей.
Оригинал: “https://dev.to/msal/how-to-build-a-news-app-with-react-native-4ifd”