Введение

Это приложение, созданное с использованием технологии ReactNative, имитирует клиентское приложение Zhihu Daily. Основная цель — изучение ReactNative и освоение его API и принципов работы.

В приложении реализованы: главная страница, страница подробностей, страница комментариев, специальная страница, ящик, страница входа, страница главного редактора и другие страницы. Также реализована функция переключения между дневным и ночным режимами. Почти 90% кода написано на стороне ReactNative.

• Фреймворк Проект использует версию ReactNative 0.45.1 и следует синтаксису ES6. Для обучения, несмотря на то что проект не является крупным, используется архитектура Redux. Это также закладывает основу для будущего расширения. Используется промежуточное ПО redux-thunk для более гибкой обработки асинхронных операций.

• Маршрутизация страниц В проекте используется компонент React-Navigation для навигации по страницам. Он также основан на архитектуре Redux и позволяет гибко управлять маршрутизацией через действия dispatch. По мнению автора, он не сильно отличается от Navigator до версии 44 и даже более гибкий.

• Кэширование данных Приложение включает механизм кэширования данных. Различные стратегии кэширования используются для разных типов данных на разных страницах (подробности см. в комментариях к исходному коду). Можно использовать AsyncStorage для реализации кэширования, но автор обнаружил библиотеку react-native-storage, которая расширяет AsyncStorage. Она хорошо разработана и мощна, поддерживается RN Chinese Web.

• Сеть Для сетевых запросов используется объект Fetch, предоставляемый ReactNative. Добавлены таймеры для улучшения функции тайм-аута запросов и унифицированы заголовки запросов, типы запросов и т. д. Результаты запросов возвращаются в виде объектов Promise для асинхронной обработки.

• Анимация Используются как анимации ReactNative, так и анимации Android Native. Например, анимация значка при запуске приложения аналогична оригинальному приложению. Однако в некоторых местах сложно реализовать анимацию, подобную оригинальной, используя только ReactNative.

• Загрузка веб-страниц Существуют некоторые проблемы с отображением веб-страниц в текущей версии ReactNative. Например, компонент webView не предоставляет прослушиватели событий прокрутки на платформе Android, что затрудняет реализацию некоторых специальных эффектов. В этом проекте компонент webView напрямую настраивается, а события прокрутки передаются обратно в ReactNative для обработки. Эффект удовлетворительный.

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

(Спасибо за предоставление API Zhihu Daily, хотя количество API ограничено, они всё же позволяют этому проекту выглядеть более реалистично. Если вам нужно, вы можете поискать в Интернете или связаться со мной.)

Скриншоты

Скриншот приветственной страницы и главной страницы:

Скриншоты других страниц:

Скриншот	Ссылка

Установка и загрузка

Установка:

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

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

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

npm install

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

react-native run-android

Загрузка:

Нажмите на ссылку, чтобы загрузить приложение.

Сторонние зависимости

• 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

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

npm install

3. Запуск на Android:

react-native run-android

Заключение

Автор считает, что приложение работает неплохо и предлагает поставить ему звезду для поддержки.

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

Проект имеет много проблем и областей для оптимизации, и автор будет продолжать обновлять его. Если у вас есть какие-либо вопросы или предложения, пожалуйста, сообщите автору. Автор надеется на взаимное обучение и прогресс.

Цель проекта — обучение и обмен опытом. Если вы считаете, что проект нарушает чьи-то права, пожалуйста, укажите это.

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