React native android app example

Пишем первое приложение на React Native. Часть 1.

Сообщество DevSchacht растёт, накапливает контент и завоёвывает преданных читателей. В свою очередь последние всегда желают получать информацию быстро и удобно. А лучше сразу на своё мобильное устройство. Можно сделать сайт, а можно пойти дальше и создать полноценное приложение, которое будет уведомлять о новых статьях, кешировать их и позволит читать там, где нет мобильной связи (например, в метро).

И тут у нас есть два варианта: новый кленовый PWA и старое доброе нативное приложение. К сожалению, PWA пока не работают полноценно на iOS (как минимум до появления сервис-воркеров в Safari). А написание нативных приложений требует знаний незнакомых нам технологий. Но мы фронтендеры и не хотим учить Java и Swift. Мы хотим React, CSS и в продакшен, и благодаря компании Facebook у нас есть всё, для того, чтобы реализовать наше желание.

В этой серии статей мы постараемся шаг за шагом разработать мобильное приложение DevSchacht на React Native и довести его до публикации.

Дисклеймер: автор не является профессиональным разработчиком на React Native. Советы, данные в статье, могут быть не оптимальны — но, как говорится, мы открыты для пул-реквестов 🙂

Что такое React Native?

React Native — это фреймворк для разработки кроссплатформенных приложений. Он даёт возможность создавать и использовать компоненты точно так же, как обычно мы это делаем в React, вот только рендериться они будут не в HTML, а в нативные контролы операционной системы, под которую будет собрано наше приложение.

Итак, у нас есть знакомый JavaScript, JSX и CSS (на самом деле это полифил, реализующий подмножество CSS). C JavaScript есть некоторая неприятная особенность: и на Android, и на iOS ваш код будет исполнять движок JavaScriptCore (тот самый, который идёт в комплекте с WebKit). А вот отлаживать код в режиме дебаггера и запускать тесты вы будете в node.js и Chrome, то есть на движке V8.

• На симуляторах и устройствах iOS, эмуляторах и устройствах Android React Native использует JavaScriptCore. В iOS JavaScriptCore не использует JIT.
• При использовании дебаггера весь код запускается внутри среды отладки (например, в Chrome), общение с нативным кодом происходит через WebSocket. Таким образом, при отладке вы используете V8.

Инструменты

Среда разработки

Сам я являюсь ярым поклонником WebStorm, это немного тяжеловесная и интерфейсно перегруженная, но потрясающе мощная и удобная IDE на основе IntelliJ IDEA от компании JetBrains. В настоящее время в неё неплохо интегрирован набор утилит для работы с React и React Native.

Когда возможностей WebStorm становится слишком много, а свободного ОЗУ в системе — слишком мало, я расчехляю старый добрый vim. В принципе, никто не запрещает использовать его с React Native, особенно если подключить подсветку JSX-синтаксиса.

Так же, можно дать шанс результату симбиоза Facebook и GitHub — редактору Nuclide. Этот редактор является набором расширений для Atom и позиционируется компанией Facebook как первоклассное решение для разработки на React Native. Честно говоря, в моём случае этот редактор оказался невероятно требователен к ресурсам и я отказался от его использования.

Заготовка

Для разработки нашего приложения воспользуемся заготовкой от Facebook — Create React Native App. Установить её не сложно:

К сожалению, если вы уже установили пятую версию npm, то ничего не получится. Либо ставьте четвёртую версию npm, либо попробуйте yarn — новый пакетный менеджер от Facebook, в котором всё отлично работает (что неудивительно).

Далее создаём каркас нашего будущего приложения:

Тулинг

В принципе, у нас уже есть всё для начала разработки. Однако стоит установить ещё пару полезных утилит, которые упростят нам жизнь в будущем.

Create React Native App поставляется вместе с Expo. Expo — это набор утилит, библиотек и сервисов, облегчающих разработку на React Native. Expo SDK позволяет обращаться к системной функциональности (такой как камера, контакты, локальное хранилище данных и так далее). Это значит, что вам не нужны Xcode или Android Studio и умение писать нативый код. А так же это значит, что благодаря этому слою абстракции, ваш код становится действительно кроссплатформенным.

Более того, вам даже не нужен XCode и симулятор iOS для запуска приложения, с помощью Expo приложение в режиме отладки можно запустить прямо на телефоне. Для этого на телефон нужно установить клиент Expo для iOS или Android.

Так же, для большего удобства разработки, рекомендую установить Expo XDE, существующий в версиях под MacOS, Windows и Linux.

And last but not the least ( последний, но тоже важный): нам нужен хороший дебаггер. По умолчанию в качестве дебаггера открывается Google Chrome. Это неплохо, но недостаточно удобно. Есть сторонние дебаггеры, один из лучших это React Native Debugger.

Так как стандартный упаковщик (или packager — утилита, упаковывающая ваш JavaScript код в бандл) React Native запускается на порту 8081, а упаковщик Expo на порту 19001, то в дебаггере нужно указать этот порт.

Привет, мир!

Итак, всё готово, для того, чтобы попробовать запустить наше первое приложение. Нам надо выбрать, где мы запустим наше приложение. Так как я работаю на MacOS и у меня установлен XCode, то я выбираю симулятор.

Если у вас нет MacOS, то вы можете запустить приложение прямо на устройстве. Откройте клиент Expo и просканируйте QR-код, который выведется после запуска.

Вы должны увидеть на экране следующий текст

Открываем App.js и меняем

Сработает Hot Reload (горячая перезагрузка), и в приложении вы увидите «Привет, мир!».

Что тут происходит? Наш код шаблона выглядит как обычный HTML, но вместо веб-элементов, таких как

является встроенным компонентом, отвечающим за отображение текста.

Этот код определяет новый компонент App . Все, что вы видите на экране — это набор компонентов. Компонент может быть довольно простым: единственное, что требуется, это функция рендеринга, возвращающая JSX. В следующий раз я покажу как можно писать компоненты в более компактном стиле.

Вот и всё, что я хотел сказать на сегодня, увидимся во второй части.

Источник

React Native с колокольни Android-разработки часть 1

Зачем?

Я понимаю, что основная аудитория react native это как раз таки веб разработчки, которые захотели потыкать в мобильные устройства. Но зачем мобильному разработчику смотреть в сторону react native? Я опущу момент как я вообще наткнулся на react native, скажу лишь то, что я уже несколько месяцев на него посматриваю и вот последние 4-5 дней активно изучаю. Я понял, что реакт уже готов что бы создавать простые приложения, которые принимают и отправляют данные. А потом я начал вспоминать все свои проекты и понял, что большая часть из них как раз принимает и отправляет данные, за редким исключением. Получается, что большую часть приложений я мог сделать реакте? Ага, а плюсом шло бы еще приложения на iOS.

Конечно, нативная разработка лучше по всем параметрам, но есть пару НО:

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

Смысл в том, что я занимаюсь нативной разработкой под android уже довольно долго и до сих пор приходится сталкиваться с новыми странными (но, порой, и интересными) проблемами. А если мне нужно приложения и под iOS, сколько уйдет времени что бы я научился нативно писать под iOS? Я уже изучал iOS и столкнулся с проблемой подходов: а как писать приложения? Паттерны, библиотеки, best practices и прочее. И для каждой платформы свои заморочки. В случае с реактом тоже свои проблемы, но они общие на обе платформы. Так что я свой выбор сделал: для простых приложений сил реакта хватает, когда начинаются трудности можно прибегнуть к главному козырю — написать модуль нативно под нужную платформу. Ну а вишенкой на торте становится то, что фраза: «Ну, это такой же React как в вебе, только на мобилках» работает и в обратную сторону, изучая react native я использую те же инструменты и подходы что и на вебе, можно будет намного легче сменить направление разработки на веб.

Инструменты

Непосредственно про установку можно почитать тут. Далее я буду считать, что вы прочитали тот мини-туториал.

Конечно, после Android studio все будет не так удобно, придется много работать с консолью (если не запускать студию вообще), но привыкнуть можно. Лично я использую:

возымела эффект необходимо, чтобы виртуальный девайс уже был запущен. Android studio все делает за нас после нажатия на волшебную зеленую кнопочку, а тут придется все делать вручную. Чтобы каждый раз не запускать студию ради запуска виртуального девайса просто открываем меню Android Virtual Device:

Запускаем нужный нам девайс и смотрим в консоль в студии, там будет что-то вроде:

Записываем куда надо, и вот у нас есть команда, с помощью которой мы можем запускать виртуальный девайс. Потом можно написать скриптик для запуска конкретного приложения.

Сразу добавлю полезную команду:

Для того что бы видеть логи в терминале.

Компоненты

Я пока не стану останавливаться на том, как вообще заставить работать приложение, про это позже. Так же оговорю, что я буду использовать примеры от сюда, обязательно все там сами почитайте, но после этой статьи, по идеи, вникнуть станет гораздо проще, для этого и пишу статью.

Компонент является основой основ. Для начала стоит воспринимать компонент как Activity или Fragment (но фрагмент ближе). Хотя, компонентом может быть и 1 единственная кнопка. Но позже разберемся.

Самый простой компонент:

Этот компонент сделает нечто подобное:

Любой компонент имеет свой lifecycle, капитально почитать про это можно тут. Нас же интересует, в основном, только эти:

• constructor() — сам говорит за себя, это конструктор компонента, это не обязательный метод, но позже я к нему вернусь;
• render() — это метод почти аналог setContentView(R.layout.activity) из Android
• componentDidMount() — это что-то вроде метода onCreate(), но немного по-другому, вызывается сразу после метода render()

componentDidMount() — это как раз то место, где нужно делать запросы к серверу, чтобы получить данные, которые необходимо отобразить. Он так же не является обязательным методом.

И все тут просто, но мы же захотим работать с данными? У компонента есть 2 источника данных:

• Props
• State

Props можно воспринимать как Intent, который мы передаем когда открываем другую активити. Это данные, которые передаются ВкомпонентИЗвне.
А теперь наглядно:

Давайте разбираться. Props вызывается внутри компонента конструкцией:

в этом примере параметр называется «name». Ну а в фигурных скобках нужно вызывать вообще все параметры, не только props.

Далее, нам необходимо передать props:

Greeting — это имя нашего компонента что мы вызываем, а затем, через пробел мы передаем все props, в нашем случае это «name».

Да, необычно то, что мы явно не указываем в компоненте какие нам нужны props (или я что-то не до конца понял), а сразу же вызываем их в коде как будто они уже есть. Важно заметить, что props мы можем вызывать в любом месте компонента, не только в методе render(), а так же то, что props нельзя изменить, какие пришли, такие и останутся. Типичное применение — это передать id какого-то элемента из списка, на который мы тыкнули, чтобы загрузить какую-то информацию.

Теперь про state. State — это изменяемые параметры самого компонента. Их нельзя куда-то передать напрямую, так же нельзя получить из вне. С точки зрения Android это что-то вроде private параметров без сеттеров и геттеров. State инициализируются внутри конструктора компонента:

Вся прелесть в том, что изменение любого параметра state приводит к вызову метода render(). Т.е. этого кода достаточно чтобы мы получили реальный секундомер, счетчик будет обновляться самостоятельно.

Ну, собственно, про компоненты все. Как же работает само приложение? Все достаточно просто, есть две точки входа: index.is.js и index.android.js, понятно для кого которая. И вот эта строка является настоящей точкой входа:

«folderName» — это название корневой папки проекта, менять нельзя. App — это название компонента, который мы хотим использовать как главный. Своего рода это что-то вроде Main Activity.

Идеалогия написания кода

Когда я только начинал писать на реакт нейтив я стопорился на самых простых вопросах. Допустим, самый простой экран логина: 2 EditText и 1 кнопка. Вот уж не знаю почему, но я на уровне инстинкта пытался реализовать это как в ванильном Android, т.е. MVC без всяких библиотек: по нажатию кнопки берем значения этих EditText и отправляем куда надо, предварительно провалидировав их. Даже не пытайтесь мыслить таким образом.

Через некоторое время у меня в голове щелкнул какой-то тумблер и меня осенило — react native и data binding в Android — это почти одно и тоже (ну, не совсем). Однако, подход практически 1 в 1. Уже во второй своей статье я крайне рекомендую ознакомиться с data binding для андроида, если еще не. Иначе, эта статья вообще вам не поможет.

Для начала, посмотрим как выглядит xml на Android при использовании data binding:

А вот так это будет выглядеть на react native:

Ну и как вам такое? Лично у меня после этого отпали все вопросы по поводу того как писать под react native, тут мы пишем не в императивном стиле, а в реактивном. Сразу оговорюсь, что у компонента TextInput есть метод onChangeText, но у меня он почему-то не возвращал введенный текст.

Что дальше?

Я попытался осветить все моменты, которые у меня вызвали вопросы в момент изучения react native, дальше вам следует продолжить с этого, по идеи, все должно стать понятнее.
Ну я буду писать приложение для себя, по мере поступления и решения проблем напишу еще пару статей.

Источник

Create Your First React Native Android App

React Native is an open-source mobile application framework created by Facebook. You can use it to develop applications for Android and iOS devices with a single codebase. React Native powers some of the world’s most popular apps, such as Instagram and Facebook, and in this post I’ll show you how to create your first React Native app for Android.

Example of React Native Code

The React Native code for a typical mobile app screen looks like this:

If you look closely, you’ll see that React Native uses a combination of JavaScript, HTML-like markup, and CSS. This code snippet defines a screen with a text display and styling.

React Native Development Environments: Expo vs. React Native CLI

There are two ways to create a React Native app:

I’ll talk about the pros and cons of each below.

Expo CLI

Expo is an open-source framework and a platform for universal React applications that gives a managed app development workflow. It is a set of tools and services built around React Native and native platforms that help develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript or TypeScript codebase.

Expo takes away all the complexities associated with building React Native apps. Some of the features of the Expo CLI include:

• Universal APIs which provide access to features like camera, maps, notifications, sensors, haptics, and much more.
• A cloud-based build service that gives you app-store-ready binaries and handles certificates.
• Over-the-air updates which let you update your app at any time without the hassle and delays of submitting to the store.

React Native CLI

The React Native CLI is a more basic and bare-metal development environment. The good thing is that it makes it possible to build app binaries on your own machine, without relying on a cloud service. On the other hand, the setup is much more complicated—to build apps for Android, you’ll need to install Android Studio and configure many features before getting started. This process can be a bit complex, but the React Native CLI environment is more suited to professional app developers.

For this tutorial, we’ll use Expo since that’s the easiest way to get started building React Native apps.

How Expo Works

To use Expo, you first need to install the Expo Client app, which is available on the Play Store (a version is also available on the iOS App Store). The Expo Client app will allow you to run the app for testing purposes in real time.

You can code your React Native app on your own computer with your favorite programming text editor, and then use the Expo CLI to test or publish your app. Behind the scenes, Expo will package your React Native code and make it available to the Expo Client app on your device. You can also use the Expo CLI to publish your app and make it available to anyone with the Expo Client, or to build a standalone version of your app that can be uploaded to the app store and run without installing the Expo Client.

Creating an App With Expo

In this tutorial, we will use the Expo CLI to create our app.

Prerequisites

To create a React Native app with Expo, you need to meet the following:

• Node.js version 12 LTS or higher and Git on your computer
• an Android device with Lollipop (Android 5) or higher
• the Expo client application installed on your Android device (download the Expo client for Android from the Play Store)
• a basic understanding of ReactJS or JavaScript

Also, note that your development computer and phone must be connected to the same wireless network.

Download Node.js

Visit the Node.js website and download the latest version of Node. Node is available for Windows, macOS, and Linux operating systems. Simply choose your operating system and install it according to the instructions available on the site.

To check if Node.js is installed, open a terminal window and type:

This command will display the installed Node version.

Install Expo Client

After you’ve installed Node, you will also need to install the Expo CLI client. Simply run the following command:

For macOS and Linux users, ensure you use sudo .

Ignore any warnings or errors which occur in the process of installing the Expo CLI. After a successful installation, you should see the message below.

Create a To-Do List App With React Native

We will create a simple to-do list app that lets you input a list of tasks you need to get done and displays them on the screen.

Create a New Project With Expo

To get started, run the following Expo CLI command to create a new project:

tasklist is the name of the project. You will be prompted to choose a template for your project. For now, choose the blank template, which gives you minimal dependencies.

The expo init command creates a project folder and installs all the dependencies required by the React Native app.

Navigate to the project folder and run the following command:

npm start will start the Expo dev tools and open a new tab in your browser that looks like this:

This window allows you to run your app on a simulator or a connected device.

Connect a Device

Now, open the Expo client app on your physical Android device and select the Scan QR Code option, as shown below.

Next, go back to the Expo dev window, scan the bar code, and wait for the JavaScript bundle build process to complete. This usually takes a couple of minutes. When the process is complete, the application should be running on your phone!

Project Structure

Now that your development environment is ready, you can edit the code for the project using your preferred code editor. The project folder looks something like this:

• assets: holds the images for the app
• node_modules: contains all the dependencies for the project
• App.js: holds the code which renders the UI and is an essential file

App.js is open in the screenshot above. Let’s take a closer look. First, we import React from react . We then import the Text and View components from react-native . We also import Stylesheet , which helps with styling.

React Native comes with built-in components such as

and as opposed to standard HTML components, like

. The component is the most fundamental component in React Native and is used for grouping other child components—like

component is used to display text content on the screen—like

In the boilerplate version of App.js that Expo creates, there is a simple view with a text component and a status bar. This view is returned from the App() function. The styles constant contains some basic CSS to style the view.

Next, let’s add some new components and styles to the app!

Create the App UI

Open the App.js file and enter the following code.

The code above adds a simple text input and a button for adding new tasks. We use CSS flexbox styling to position the components next to each other.

Add Event Handling

To get the user input, we first import the useState() function from react and use it to update the state of the newTask() and setnewTask() functions. Since the user hasn’t typed anything yet, the initial state will be empty. Add the following code to the top of the App() function, just above return :

We then define the taskInputHandler , which listens to the change in the input and updates the content of the setNewTask() function. Add these lines to the App() function next:

Now we register this input handler with the TextInput component. Update your TextInput component so it looks like the following.

Now we need to handle button presses. When the user presses the + button, we want to add the new task to a list.

First, we’ll define our state for the list of tasks:

Next, we define an addTaskHandler function to add the new task (found in the newTask state) to the list.

And register that event handler with the component:

Finally, we’ll add a new view to show all the tasks in the list we’ve created. This goes just after the input container view, but still inside the main container view.

Complete Source Code for App.js

The full code for App.js is shown below. Compare it to what you have.

Conclusion

In this tutorial, you learned how to create a React Native app with Expo.

React Native is a great framework and a popular platform for both developers and businesses. Apps created with React Native are guaranteed to work smoothly on any platform or system. React Native also saves development work by letting you code your app once and run it on any mobile platform.

Premium Mobile App Templates From CodeCanyon

CodeCanyon is an online marketplace that has hundreds of mobile app templates—for Android, iOS, React Native, and Ionic. You can save days, even months, of effort by using one of them.

Whether you’re just getting started with React Native, or are a seasoned developer, a React Native app template is a great way to save time and effort on your next app project.

If you have trouble deciding which template on CodeCanyon is right for you, these articles should help:

Источник