
Содержание статьи
от Мохаммеда Салмана

Для моей первой публикации на Medium я хотел поделиться с вами, как я создал новое приложение с помощью React Native.
Сначала опубликовано в моем блоге.
Требования к созданию программы:
Если вы не знакомы с этими ресурсами, не беспокойтесь — ими достаточно легко пользоваться.
Темы, которые мы рассмотрим в публикации:
- API новостей
- API Fetch
- FlatList
- Потяните вниз, чтобы обновить
- Ссылки
И больше… так что начнем!
Вы можете найти репо проекта здесь
API новостей
Простой и легкий в использовании API, возвращающий метаданные JSON для заголовков и статей, опубликованных по всей сети прямо сейчас. — NewsAPI.org
Во-первых, вам следует зарегистрироваться в News Api, чтобы получить бесплатно apiKey
(ваш ключ аутентификации).
Создайте новый проект React Native и назовите его news_app
(или что угодно). В каталоге проекта создайте новую папку и вызовите ее src
. В src
создайте папку и назовите ее components
. Ваш каталог проекта должен выглядеть примерно так:

В src
создайте новый файл под названием news.js
. В этом файле мы собираемся получить JSON, содержащий заголовки из News API.
news.js
Убедитесь, что вы заменили YOUR_API_KEY_HERE на свой собственный ключ API. Чтобы узнать больше о News API, перейдите на страницу документы newsapi.
Теперь мы объявляем getNews
функция, которая будет получать статьи для нас. Экспортируйте функцию, чтобы мы могли использовать ее в нашем App.js
файл.
App.js
В конструкторе мы определяем исходное состояние. articles
будет сохранять наши статьи после того, как мы их получим, и refreshing
поможет нам обновить анимацию. Обратите внимание, что я установил refreshing
bool имеет значение true, поскольку когда мы запускаем программу, мы хотим, чтобы анимация запускалась при загрузке статей (заголовки новостей).
componentDidMount
вызывается сразу после монтирования компонента. Внутри него мы называем fetchNews
метод.
componentDidMount() { this.fetchNews();}
в fetchNews
мы называем getNews()
возвращающий обещание. Поэтому мы используем .then()
метод, принимающий функцию обратного вызова, а функция обратного вызова принимает аргумент (статьи).
Теперь назначьте статьи в состоянии аргумента articles. Я только набрал articles
поскольку это новый синтаксис ES6, что означает { articles: articles }
и мы установили refreshing
на false, чтобы остановить анимацию спинера.
fetchNews() { getNews().then( articles => this.setState({ articles, refreshing: false }) ).catch(() => this.setState({ refreshing: false }));}
.catch()
вызывается в отклоненных случаях.
handleRefresh
метод запускает анимацию спинера и вызывает fetchNews()
метод. Мы проходим () => this.fetchNew
s(), поэтому он вызывается сразу после того, как мы назначаем состояние.
handleRefresh() { this.setState({ refreshing: true },() => this.fetchNews());}
Внутри метода render мы возвращаем a FlatList
компонент. Затем мы передаем реквизит. data
это массив статей из this.state
. The renderItem
принимает функцию для воспроизведения каждого элемента в массиве, но в нашем случае она просто возвращает Article
компонент, который мы импортировали раньше (мы дойдем до него). И мы передаем элемент статьи в качестве проп для использования позже в этом компоненте.
Article.js
в src/components создать новый файл JavaScript и вызвать его Article.js
Начнём с установки двух простых библиотек с помощью npm: react-native-elementsчто дает нам некоторые готов компоненты, которые мы можем использовать и момент, который выдержит наше время.
Установите их с помощью npm:
npm install --save react-native-elements moment
В Article.js:
Здесь многое происходит. Сначала мы начинаем с деструктуризации article
реквизит и styles
объект определенный ниже класса.
В способе render мы определяем константу времени для хранения времени публикации статьи. Мы используем библиотеку моментов, чтобы превратить дату в с тех пор прошло времяи мы проходим publishedAt
или время отныне если publishedAt
есть null
.
defaultImg
назначается URL-адрес изображения, если URL-адрес изображения статьи является нулевой.
Возвращается метод render TouchableNativeFeedback
для обработки, когда пользователь нажимает карту. Мы передаем ему некоторые реквизиты: useForground
что указывает элементу использовать передний план при отображении эффекта волны на карте, и onPress
, который принимает функцию и выполняет ее при нажатии карты. Мы прошли () => Linking.openUrl(u
rl), который просто открывает URL-адрес полной статьи, когда мы нажимаем карту.
У карты есть три реквизита: featuredTitle
который является заголовком, размещенным над изображением, featuredTitleStyle
стилизовать его, и image
это изображение статьи по опоре на статью. Иначе, если его null
это будет defaultImg
.
.. featuredTitle={title} featuredTitleStyle={featuredTitleStyle} image={{ uri: urlToImage || defaultImg }}..
Что касается текстового элемента, то он будет содержать описание статьи.
<Text style={{ marginBottom: 10 }}>{description}</Text>
Мы добавили разделитель, чтобы отделить описание время и название источника.
<Divider style={{ backgroundColor: '#dfe6e9' }} />
Ниже Divider
мы имеем View
содержит название источника и время публикации статьи.
..<View style={{ flexDirection: ‘row’, justifyContent: ‘space-between’ }} > <Text style={noteStyle}>{source.name.toUpperCase()}</Text> <Text style={noteStyle}>{time}</Text></View>..
После class
мы определили стили этих компонентов.
Теперь, если мы запустим приложение:


Вот так! Исходный код программы доступен на GitHub: ЗДЕСЬ, не стесняйтесь разветвлять его.
Надеюсь, вам понравилась моя статья! Если у вас возникли вопросы, не стесняйтесь оставлять комментарии или связываться со мной в Twitter, и я обязательно помогу 🙂
?Купить мне кофе?
Следующая история? Как создавать нативные настольные программы с помощью JavaScript