Введение

Это приложение, написанное с использованием технологии React Native, имитирует клиент "Знайка Дейли". Основная цель — изучение React Native, освоение его API и принципов работы. В приложении реализованы главная страница, страница с подробной информацией, страница с комментариями, страница тем, страница с выпадающим меню, страница входа, страница редактора и другие страницы, а также режимы светлого и темного оформления (в настоящее время адаптировано только для Android). Почти 90% кода написано на React Native.

• Фреймворк Проект использует версию React Native 0.45.1, которая следует стандартам ES6. Для обучения были применены архитектурные решения Redux, чтобы углубить понимание этой архитектуры и подготовиться к будущим расширениям. Также используется middleware redux-thunk для более гибкого управления асинхронными операциями.
• Маршрутизация страниц Механизм маршрутизации проекта основан на рекомендованном Facebook компоненте навигации React Navigation, который использует идеи Redux для гибкого управления маршрутами через dispatch action. По сравнению с предыдущими версиями Navigator, этот подход кажется более гибким.
• Кэширование данных В проекте внедрен механизм кэширования данных, где для различных страниц используются различные стратегии кэширования (подробнее можно найти в комментариях исходного кода).Хотя можно было бы использовать AsyncStorage для кэширования, был найден третий-сторонний JS-библиотека react-native-storage, которая предоставляет расширенные возможности для AsyncStorage. Эта библиотека поддерживается сообществом RN Chinese.
• Сеть Для сетевых запросов была создана простая оболочка вокруг объекта Fetch, предоставленного React Native. Были добавлены таймеры для обработки таймаутов запросов, а также созданы унифицированные заголовки запросов и типы запросов. Каждый запрос возвращает Promise, что позволяет асинхронно обрабатывать результаты запросов.
• Анимация Анимация реализована как с помощью React Native, так и с использованием анимации Android. Например, анимация значка на экране запуска практически не отличается от оригинального приложения, но иногда трудно добиться такой же плавности анимации с помощью React Native.
• Загрузка веб-страниц При текущих версиях React Native существуют некоторые проблемы с отображением веб-страниц. Например, контроллер webView в React Native не предоставляет событий прокрутки для Android, что затрудняет достижение некоторых специальных эффектов. В проекте решена эта проблема путём использования оригинального WebView для создания кастомного WebView в React Native, который передаёт события прокрутки обратно в React Native. Этот подход работает хорошо.
• ПрочееПрочие аспекты проекта включают использование различных пользовательских View, ListView, отрисовку страниц и реализацию различных эффектов. Подробное описание этих аспектов будет представлено в других заметках. (тишина — благодарю за предоставление API проекта Zhihu Daily. Несмотря на то, что количество доступных интерфейсов ограничено, именно благодаря этим API интерфейсам проект на React Native стал выглядеть более законченным, что вдохновляет продолжать работу над ним 😄. Если вам это нужно, можете найти информацию онлайн или связаться со мной.)#### Пример экрана

Установка и установочные файлы

Внешние зависимости

• react-redux/redux/redux-thunk
• react-navigation
• react-native-extra-dimensions-android
• react-native-storage
• react-native-svg

Установка и конфигурация

1. Клонируйте репозиторий

git clone https://git.oschina.net/null_711_9174/zhihudailyrn.git
cd zhihudailyrn

2. Установите зависимости

npm install

3. Запустите на Android

react-native run-android

Последнее

Если вам понравилось, пожалуйста, оставьте звездочку для поддержки (￣▽￣)~*

Проект адаптирован только для Android из-за моих сильных навыков в этой области и параллельной работы над другими проектами. В ближайшее время планируется работа над iOS версией, что позволит мне также освоить основы разработки на iOS.

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

Цель этого проекта — обучение и обмен опытом. Если он каким-то образом нарушает права других, прошу сообщить об этом.

Электронная почта: ah_zjm@163.com