от Мохаммеда Салмана

Для моей первой публикации на 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.fetchNews(), поэтому он вызывается сразу после того, как мы назначаем состояние.

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(url), который просто открывает 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