Реакт натив фреймворк — это небольшой проект, который сейчас обновляется.

Сейчас делается интерфейсная структура, состоящая из пяти частей нижней навигации: «Майнинг» (главная страница), задачи, друзья, транзакции и главная страница «Я». Для реализации навигации используется реакт-навигация. Также реализована функция регистрации и входа в систему с использованием инструментов управления состоянием State: реакт-танк и реакт-редукс. Просто реализованы страницы и переходы.

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

Учиться можно бесконечно, Fight!

Обновление от 6.29 Реализован эффект сетки для ListView. Каждому элементу добавлен обработчик события клика. Эффект следующий (слева):

Обновление от 7.01 С помощью StatusBar реализован эффект иммерсивной строки состояния. Добавлен мониторинг физической кнопки возврата. Эффект следующий (справа):

Обновление от 7.03 Встроен собственный видеоплеер React Native Vedio (на верхнем изображении). Это перевод китайской документации по React Native Vedio, которую я нашёл на Jianshu.com. В Китае нет документации на русском языке.

Обновление от 7.05 Решена проблема перехода к определённой странице при нажатии на элемент списка. Необходимо объявить this.props.navigation.navigate=navigate в вызываемой странице. После этого можно переходить на другие страницы из компонента. Также добавлены новости (используются сторонние API для запроса сетевых данных) и FlatList для отображения полученных данных. Отлично!

Обновление от 7.06 Переработан интерфейс входа. Он стал более привлекательным и анимированным. Это сделано на основе проекта React Native Login Screen от dwicao. Эффект следующий (справа):

Обновление от 7.12 Обновлён экран загрузки. Получены контакты и т. д. Используется библиотека зависимостей React Native Splash Screen для взаимодействия с родным кодом.

Обновление от 7.15 Решено, как получить локальные ресурсы, когда источником данных является json. Если источник данных — локальный путь, то он не будет найден. Чтобы получить локальный ресурс, можно экспортировать объект data в файле js и сохранить источник данных локального ресурса в data. Подробнее см. ListViewComponent.js.

Обновление от 7.20 Переработан интерфейс «Мой», чтобы он выглядел менее просто. Затем продолжена оптимизация интерфейса.

Обновление от 7.24 На экране транзакций используется библиотека диаграмм React Native Charts Wrapper. Эта сторонняя библиотека диаграмм имеет широкий спектр функций и может масштабироваться. Есть несколько интересных анимационных эффектов. Ниже приведены пользовательские диаграммы, которые показывают тенденции роста. 7.26 обновление

Реализован дизайн новостной ленты и страницы с подробностями, углублено понимание react-navigation: как использовать при вложении одного экрана в другой и т. д.

7.27 обновление

Реализована компоновка, похожая на самую правую страницу платёжной системы Alipay. Использован Listview. В первый раз передаётся вызов компоненту в навигационной панели. Подробнее см. в моём блоге «React Native компоненты: настройка динамических параметров» (https://www.jianshu.com/p/429458c46017). Написано небрежно, прошу прощения.

8.06 обновление

В последнее время был занят, обновлений было мало. Дополню информацию о получении списка контактов. Для этого я использовал react-native-contacts-picker — очень полезный инструмент, который позволяет выбрать контакты из телефонной книги, вызывая системный интерфейс. Эффект от реализации следующий:

8.16 обновление

1. Реализован модуль входа в систему с использованием реального интерфейса данных LoginScreen. Кроме того, реализованы функции регистрации, входа по SMS и восстановления пароля. Написаны некоторые вспомогательные классы, такие как fetchUtil для выполнения сетевых запросов, CheckUtils для проверки правильности номера телефона с помощью регулярных выражений, CountdownUtil для таймера SMS-кода и другие. Эти инструменты можно упаковать один раз и использовать многократно, что очень удобно.

2. VideoScreen теперь отслеживает прогресс воспроизведения видео и открывает всплывающее окно для перехода к экрану обмена. Сам экран обмена ещё не реализован, но будет добавлен позже. Также я написал блог о том, как реализовать обратный вызов для навигации, чтобы продолжить воспроизведение после перехода (https://www.jianshu.com/p/8a48fc39bab7), чтобы поделиться знаниями с другими.

9.30 обновление

Последнее обновление! Большое спасибо за ваши звёзды! Завтра праздник, так что хорошо проведите время и не забывайте учиться!

1. Добавлена функция обмена через WeChat. Необходимо подать заявку на платформе разработчика WeChat. Подробные инструкции и методы использования см. в моем блоге «React Native: сторонние интерфейсы и обмен через WeChat» (https://www.jianshu.com/p/0b8f0f4a94ed).

2. Добавлен Push-уведомления от Jiguang. Аналогично, необходимо использовать сторонний интерфейс Jiguang (что тут объяснять?). Подробности см. на официальном сайте Jiguang (https://www.jiguang.cn/). Ниже представлен снимок экрана после создания приложения:

3. Наконец, добавлена возможность выбора фотографии или съёмки после нажатия на аватарку профиля. Здесь используется библиотека react-native-image-picker (https://github.com/react-community/react-native-image-picker).

OK! Done! Я больше не буду поддерживать этот проект. Если он помог вам в обучении, я действительно рад этому (wink). Продолжайте двигаться вперёд!