Создание мобильного приложения на React Native
Всем привет. Это будет первой частью в создании нашего мобильного приложения.
Мобильное приложение мы будем делать с помощью react native и expo. Мы создадим не большое новостное приложение. Для этого мы будем использовать php через rest api.
В нашем приложении мы будем выводить статьи, которые будут находиться в phpmyadmin.
Что такое expo?
Expo, представляет собой набор инструментов, библиотек и сервисов, которые позволяют создавать собственные приложения для iOS и Android с помощью JavaScript. Звучит многообещающе. Проще говоря, Expo помогает вам просматривать проекты, пока вы еще их разрабатываете. Expo CLI создает URL-адрес для разработки (аналогичный локальному хосту в Интернете), который затем можно открыть в клиенте Expo для предварительного просмотра приложения.
Установка Expo
Перед тем, как установить expo, убедитесь что вы установили npm.
Expo дает вам варианты. Вы можете предварительно просмотреть свое приложение через клиентское приложение Expo на своем мобильном устройстве или с помощью симулятора iOS / Android на своем компьютере. Я при создании приложения использовал expo на android.
Создание expo приложения
После установки Expo открывается интерфейс Expo CLI и позволяет выбрать имя проекта и шаблон. Мы выберем пустую страницу.
После этого, expo запустит локальный сервер разработки, откроет новое окно для просмотра сервера и предоставит вам QR-код, чтобы открыть ваш проект на вашем мобильном устройстве. Либо вы можете зарегистрироваться в мобильном приложении и expo cli, и он в мобильном приложение автоматически покажет текущие разработки.
Чтобы войти в expo на вашем компьютере используйте эту команду:
Установка react-navigation
Чтобы мы могли переходить с одного экрана на другой, нам нужно скачать react-nativation:
Начало разработки
Теперь давайте начнем нашу разработку.
Первое, что мы сделаем — это откроем App.js (наш главный файл).
Верстка
Чтобы наше приложение выглядело привлекательным, мы добавим пару элементов и добавим к ним стили.
Сначала добавим заголовок:
Теперь давайте добавим блок с выводом статей и стилизуем его.
На этой наш урок заканчивается.
В следующем уроке мы сделаем вывод данных mysql.
Если вам интересно, как все получиться перейдите и скачайте это приложение, там будет вкладка с новостями — мобильное приложение
Современное окружение для React Native приложений
В этой статье мы рассмотрим настройку React Native окружения с использованием expo-cli, Typescript, и Jest.
Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.
Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.
Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.
Expo — это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.
Создаем проект
Сперва установим из yarn все зависимости, необходимые для создания шаблона приложения.
yarn global add expo-cli
Далее проинициализируем React Native приложение и выберем пустой шаблон Typescript.
Теперь мы можем запустить проект и начать разработку приложения.
cd exampleApp
yarn start
Конфигурация Tslint
Настроим tslint, чтобы правильно использовать VSCode или другой редактор и видеть ошибки на этапе разработки. Так мы обеспечим единый стиль кода и предотвратим его усложнение.
Сперва мы установим tslint пакет в глобальный каталог:
yarn global add tslint
Эта команда создаст файл tslint.json со следующей конфигурацией:
Далее просто проверим typescript файлы при помощи нашей конфигурации:
tslint ‘src/**/*.ts’
После этого VS Code будет автоматически использовать файл конфигурации для валидации кода в редакторе. Ошибки типов будут отображены в редакторе при разработке приложения.
Также в целях удобства добавим команды для yarn. Их можно использовать для локальной разработки или же проверки на этапе continuous integration.
«scripts»: <
«lint»: «tslint ‘*.ts*’»
>
Чтобы добавить плагин в конфигурацию tslint, просто добавим название плагина в поле extends:
Jest и тесты на Typescript
Jest — это фреймворк для тестирования Javascript кода. Он облегчает тестирование, поддержку и разработку React Native приложения.
Сначала нужно установить фреймворк и добавить поддержку typescript, так как кодовая база у нас написана с поддержкой статической типизации.
yarn ts-jest config:init
Эта команда сгенерирует конфигурационный файл из шаблона. Мы немного изменим его для React Native окружения. Файл будет выглядеть следующим образом:
И напоследок добавим команду для запуска тестов в package.json:
Пишем тесты для Jest
Попробуем написать пример тестов для Jest. Для этого создадим файл App.test.tsx:
Для запуска тестов выполним раннее созданную yarn команду:
Все тесты прошли успешно. Но пока мы не можем писать тесты для компонентов. Давайте попробуем расширить наше окружение для тестирования React Native компонентов.
Нам понадобится еще один пакет — react-test-renderer. Он предоставляет специальный движок рендеринга для React, который дает Javascript структуру на выходе. Таким образом, нам необязательно настраивать DOM или нативные модули в тестовом окружении.
Далее обновим наш файл App.test.tsx с простым тестом для компонента App.tsx.
Мы можем тестировать и нативные компоненты в тестовом окружении. На данном примере мы получили массив дочерних элементов у тега Text. Это нативный компонент из пакета React Native.
Заключение
Данный стек технологий позволил нам быстро создать окружение для разработки нативных приложений. Бизнес логика с использованием статических типов делает приложение более стабильным. Также строгая типизация Typescript помогает избежать ошибок при написании кода.
Разработка тестов внутри Jest для React Native компонентов происходит точно так же, как и для обычного React приложения.
Надеюсь, что данная статья поможет вам преодолеть начальный этап настройки окружения для разработки React Native приложений.
Выше первое приложение React Native с Expo
Если вы похожи на меня, новичка в разработке мобильных приложений, но у вас есть опыт разработки с React, Expo — это отличный инструмент, который поможет вам создать свое первое мобильное приложение!
Expo — это набор инструментов, с помощью которого вы можете написать приложение React Native за считанные минуты. Он включает в себя готовые инструменты, такие как конфигурации Android Studio / XCode, управление сертификатами в Apple & Google и push-уведомления, и это лишь некоторые из них. Кроме того, команда в Экспо невероятно отзывчива и может быть легко достигнута через их форумы или канал Slack. У них даже есть Canny для запросов функций от сообщества.
Если вы не решаетесь установить какие-либо инструменты и зависимости, вы можете попробовать React Native непосредственно в своем веб-браузере с Snack.
В этой статье я расскажу о настройке вашей среды, установке зависимостей и написании кода для создания вашего первого мобильного приложения! К концу вы создадите приложение, которое собирает данные о геолокации мобильного телефона пользователя, передает эти данные о долготе и широте в API Open Weather и отображает информацию о погоде в одном компоненте React Native. Звучит довольно легко, верно? Ну что ж, начнем!
Установка
Сначала давайте возьмем ваш личный ключ API из Open Weather по адресу https://openweathermap.org/api. Хочу отметить, что для активации API-ключа Open Weather API требуется не менее 10 минут, поэтому я предлагаю начать с этого шага.
Далее нам нужно будет установить последнюю версию NodeJS. Вы можете скачать это здесь.
Также потребуется инструмент командной строки Expo. Вы будете запускать этот инструмент локально для упаковки, обслуживания и публикации своих проектов. Кроме того, кто не любит использовать командную строку? Идите вперед и откройте свой терминал, используя следующую команду:
Отлично, теперь, когда вы установили инструмент CLI в Expo, давайте инициализируем новый проект в терминале, перейдем в соответствующую папку и, наконец, запустим Expo.
Это предложит вам выбрать тип рабочего процесса, который вы предпочитаете в своем терминале. Для этого конкретного проекта я использовал управляемый рабочий процесс с пустым холстом. Затем вам нужно будет выбрать имя (название вашего приложения в том виде, в каком оно отображается как в Expo, так и на домашнем экране в виде отдельного приложения) и slug (понятное имя URL для публикации).
Как правильно установить expo-cli с помощью yarn?
Я не знаю, что еще делать. Я на Windows 10.
3 ответа
Я пытаюсь настроить проект React и Expo monorepo, все кажется хорошим, пока я не захочу установить react-navigation с expo install в соответствии с документами react-navigation, потому что expo install использует yarn в фоновом режиме и потому, что это рабочая среда, эта ошибка выскакивает.
Для Пряжи :
Если вы хотите сохранить пакет expo-cli глобально, попробуйте
и если вы хотите, чтобы expo-cli был доступен в папке, в которой вы сейчас работаете, используйте
Для npm :
Вы хотите сохранить пакет expo-cli глобально, а затем попробуйте
Похожие вопросы:
Я пытаюсь установить expo-cli с помощью npm, и это дает мне ошибку. Я установил его с помощью yarn, и он успешно установлен, и все же он говорит: expo не распознается как внутренняя или внешняя.
Я пытаюсь настроить проект React и Expo monorepo, все кажется хорошим, пока я не захочу установить react-navigation с expo install в соответствии с документами react-navigation, потому что expo.
По некоторым причинам я не могу обновить или удалить свою версию Expo-cli. Я застрял на версии 3.11.7. Когда я запускаю обновление, оно заканчивается правильно, но не принимается во внимание. Я.
Я не знаю, что не так с моей системой, я пытаюсь настроить expo-cli с yarn global add expo-cli expo init projectname не работает, и это вызывает у меня ту же проблему, когда я пытаюсь установить с.
A Brief Introduction to Expo
Published on December 12, 2018
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it! You can help us out by using the «report an issue» button at the bottom of the tutorial.
If you find yourself looking to create cross platform mobile applications with React, you’ll have likely heard of React Native and Expo.
To summarize, Expo can be thought of as a set of libraries and tools that provide easy access to native device functionality and custom UI. Some examples of this can be things such as the Camera, Local Storage, Contacts, and more.
We’ll be creating a small weather application that uses Expo to interface with the native location API. As well as this, we’ll be publishing our application on expo.io for other users to interact with!
To get started, go ahead and create an account over at expo.io. We’ll use this to manage our Expo projects in the future.
Installing the Expo CLI
We can install the Expo CLI by running the following in the terminal:
Bare in mind, you’ll need to have Node.js and the iOS/Android SDKs installed prior to running this command!
This then gives us access to a variety of commands. We can see a full list of commands with descriptions by typing the expo command. In order to initialize a new project, we’ll need to type the following:
You may also be asked to sign-in to your Expo account at this time. Do that with the credentials you created earlier.
Running our project
We can run the blank project on either iOS or Android via the pre-built npm scripts. We can also download the Expo application on the Google Play/Apple App Store to run this on a real device quickly and easily.
Let’s start off by running our application on the emulator with either (or both!):
Note: You will need a computer running macOS to view Expo applications on the iOS Simulator.
This starts the Metro bundler, essentially a HTTP server that compiles our code with Babel to target the latest JavaScript features. The appropriate simulator should then open and the Expo application will be installed. If your application doesn’t open automatically, open the Expo application from within the simulator.
If all is well, you’ll see the words “Open up App.js to start working on your app!” on screen. Let’s do the same, but have this on our physical device:
If this doesn’t work, try switching the connection to/from Tunnel/Lan/Local modes.
Your First Expo App
Let’s start off by creating an account over at the OpenWeatherMap API. You will be emailed an API key and we’ll be using this throughout the tutorial.
We can create an API to get the weather for a particular latitude and longitude by creating a file named Api.js inside of api/Api.js :
As we’re using Expo, we can get the user’s location easily. Let’s do that inside of App.js :
At this stage, we can capture the current location and get the weather for that latitude and longitude inside of componentWillMount :
Combining that with our render view, gives us the following component inside of App.js :
Publishing your project
When you’d like to publish your application, the Expo CLI can do this from the terminal. Run the following to build for iOS and Android:
Anyone with the URL can take the QR code and open the application up inside of the Expo app. Try it out for yourself!
