От автора: Vue Native — это платформа JavaScript, предназначенная для создания кроссплатформенных мобильных приложений, которые могут работать как на Android, так и на iOS с помощью JavaScript. Обернув вокруг React Native, разработчики могут использовать Vue Native для создания мобильных приложений с использованием Vue.js.
Из-за этого все, что можно сделать в React Native, можно сделать в Vue Native, а код компилируется в React Native. Таким образом, разработчики получают выгоду от того, что предлагают экосистемы Vue и React Native.
В этом посте мы рассмотрим функции Vue Native и то, как создать мобильное приложение с помощью Vue Native.
Возможности Vue Native
Vue Native имеет множество полезных функций, которые следует учитывать при создании мобильного приложения с Vue.js.
Декларативный рендеринг
Vue Native использует парадигму декларативного программирования. Это означает, что мы просто объявляем, как мы хотим, чтобы наши компоненты и состояние отображались для получения желаемых результатов.
Двусторонняя привязка
В нашем приложении Vue Native мы можем обмениваться данными между нашим классом компонента и его шаблоном. Если мы изменим данные в нашем состоянии, они автоматически отобразятся в пользовательском интерфейсе.
Мы по-прежнему должны получить доступ к v-модели для двусторонней привязки данных. Это означает, что мы можем привязать значение входного элемента к свойству данных нашего компонента с помощью v-модели.
Богатство экосистемы Vue.js
Экосистема Vue — одна из крупнейших и наиболее быстрорастущих экосистем в области JavaScript. Создание приложения с помощью Vue Native обеспечивает преимущества более крупной экосистемы Vue. Это означает, что мы можем использовать такие функции, как v-if для условного рендеринга, v-model для двусторонней привязки данных, v-for для рендеринга списка и Vuex для управления состоянием.
Компиляция в React Native
Поскольку Vue Native зависит от React Native, разработчикам, знакомым с экосистемой React Native, легче освоиться. Мы также можем визуализировать компоненты React Native в Vue Native, не написав ни единой строчки дополнительной конфигурации для интеграции и повышения производительности.
Настройка среды разработки
Самый быстрый и простой способ начать работу с Vue Native — это загрузить мобильное приложение с помощью Vue Native CLI. Этот интерфейс командной строки генерирует простое одностраничное приложение с использованием интерфейса командной строки Expo или интерфейса командной строки React Native.
Это означает, что мы должны установить любой CLI, в зависимости от потребностей нашего приложения, чтобы использовать Vue Native CLI.
Для начала мы должны установить некоторые зависимости. Сначала выполните следующую команду, чтобы глобально установить Vue Native CLI:
|
1 |
$ npm install --g vue-native-cli |
Затем установите Expo CLI глобально, хотя его можно заменить на React Native CLI:
|
1 |
$ npm install --g expo-cli |
Создание проекта Vue Native
Теперь, когда и Vue Native, и Expo CLI установлены, давайте создадим проект Vue Native с помощью следующей команды:
|
1 |
vue-native init <yourProjectName> |
Запустите сервер разработки, перейдя в корневую папку проекта и выполните следующую команду:
|
1 2 |
$ cd <yourProjectName> $ npm start |
Metro Bundler, который компилирует код JavaScript в React Native, запускается по адресу http://localhost:19002/. При посещении http://localhost: 8080 / в веб-браузере открывается следующая страница:
Чтобы просмотреть приложение Vue Native на физическом устройстве, отсканируйте QR-код в браузере и откройте ссылку в Expo Go для Android или iOS.
Мы также можем открыть приложение в эмуляторе Android или симуляторе iOS, кликнув ссылки, отображаемые в браузере, но не все API-интерфейсы, доступные в Expo Go, доступны в эмуляторе или симуляторе.
При желании мы можем клонировать демонстрационное приложение Kitchen Sink, подготовленное командой Vue Native.
Компоненты пользовательского интерфейса Vue Native
Vue Native поставляется с несколькими готовыми UI-компонентами для создания интерфейса приложения. Давайте взглянем на некоторые из самых важных.
Компонент View
Компонент view работает так же, как тег div в обычном HTML. Этот компонент является фундаментальным блоком для создания пользовательских интерфейсов в Vue Native, как и в React Native. У нас может быть несколько дочерних компонентов для компонента view, как в следующем коде:
|
1 2 3 4 5 |
<template> <view class="container"> <text>My Awesome Vue Native App</text> </view> </template> |
Компонент Тext
Для вывода текста в нашем мобильном приложении мы не можем использовать обычные HTML-теги, такие как h1 или p. Вместо этого мы должны использовать компонент <text>…</text>. Использовать этот компонент довольно просто:
|
1 2 3 |
<template> <text>Hello World</text> </template> |
Компонент Image
Компонент image отображает статические изображения, сетевые изображения и изображения с устройства пользователя. В отличие от обычного тега img, где мы используем атрибут src, здесь мы привязываем атрибут source в нашем компоненте image для динамической загрузки изображений. Это позволяет webpack объединять наши ресурсы изображений в процессе сборки.
Добавив следующее, мы можем загружать изображения в наше приложение Vue Native:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <!-- Network image --> <image :style="{ width: 300, height: 150 }" :source="{ uri: 'https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80', }" /> <!-- Static image --> <image :style="{ width: 300, height: 150 }" :source="require('./assets/photo.jpg')" /> <!-- Local disk image --> <image :style="{width: 66, height: 58}" :source="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}" /> </template> |
Компонент TextInput
Компонент TextInput вводит текст в приложение с клавиатуры пользователя. Мы можем использовать v-модель для привязки данных к компоненту TextInput. Это позволяет нам легко получить и установить значение TextInput:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <view class="container"> <text-input :style="{ height: 30, width: 250, borderColor: '#511281', borderWidth: 1, }" v-model="text" /> </view> </template> <script> export default { data() { return { text: "", }; }, }; </script> |
Приведенный выше код отобразит следующий экран в приложении Vue Native:
Компонент пользовательского интерфейса NativeBase
Для создания готового к работе мобильного приложения, скорее всего, будет недостаточно использования только встроенных компонентов Vue Native. К счастью для нас, Vue Native сочетает в себе лучшее из экосистем React Native и Vue.js, поэтому мы можем использовать компонент пользовательского интерфейса NativeBase.
NativeBase был создана GeekyAnts, той же командой, что и Vue Native. Этот компонент пользовательского интерфейса дает нам действительно естественный вид и удобство работы с платформой на Android и iOS с использованием той же кодовой базы JavaScript нашего мобильного приложения.
Двусторонняя привязка данных
Обмен данными между нашим шаблоном компонента Vue и состоянием Vue в Vue Native легко осуществляется с помощью v-модели. Мы можем изучить двустороннюю привязку данных с помощью директивы v-model, как показано ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<template> <view class="container"> <text-input :style="{ height: 30, width: 250, borderColor: '#511281', borderWidth: 1, }" v-model="text" /> </view> </template> <script> export default { data() { return { text: "", }; }, }; </script> |
Приводя поле ввода с привязкой данных из нашего состояния к полю ввода и текстовому компоненту, мы видим следующее:
Навигация и маршрутизация
Навигация и маршрутизация в нашем приложении Vue Native обрабатываются с помощью библиотеки Vue Native Router. Под капотом эта библиотека использует популярный пакет React Navigation. И Vue Native Router, и React Navigation имеют похожие API, а значит, и установки.
Библиотека не предустановлена, поэтому, чтобы начать работу с навигацией в нашем приложении, мы должны установить ее следующей командой:
|
1 |
npm i vue-native-router |
Обратите внимание, что для правильной работы Vue Native Router нам необходимо установить следующие пакеты:
Выполните следующую команду, чтобы установить эти пакеты:
|
1 |
npm i react-native-reanimated react-native-gesture-handler react-native-paper |
Vue Native Router предоставляет StackNavigator и DrawerNavigator для регистрации навигации:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> import { createAppContainer, createStackNavigator, } from "vue-native-router"; import SettingsScreen from "./screens/SettingsScreen.vue"; import HomeScreen from "./screens/HomeScreen.vue"; const StackNavigator = createStackNavigator( { Settings: SettingsScreen, Home: HomeScreen, }, { initialRouteName: 'Home', } ); const AppNavigator = createAppContainer(StackNavigator); export default { components: { AppNavigator }, } </script> |
Чтобы перемещаться между экранами, вызовите метод navigate для объекта navigation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> export default { // navigation is declared as a prop props: { navigation: { type: Object } }, methods: { navigateToScreen() { this.navigation.navigate("Profile"); } } } </script> |
Управление состоянием
Для централизованного шаблона управления состоянием в приложении Vue Native мы можем использовать Vuex, официальную библиотеку управления состоянием для Vue. Интегрировать Vuex просто. Сначала установите Vuex с помощью одной из следующих команд:
|
1 2 3 |
npm i vuex //or yarn add vuex |
Создайте файл центрального хранилища и добавьте state, getters, mutations или actions в зависимости от потребностей приложения. Для простоты используйте объект state:
|
1 2 3 4 5 6 7 8 9 10 11 |
// store/index.js import Vue from 'vue-native-core'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { name: 'Ejiro Asiuwhu', }, }); export default store; |
Использование данных и методов в нашем store сильно отличается от обычного приложения Vue; вот как импортировать и использовать данные в нашем store:
|
1 2 3 4 5 6 7 8 9 10 |
<script> import store from "./store"; export default { computed: { name() { return store.state.name; }, }, }; </script> |
Обратите внимание, что мы не используем this.$store, как это обычно делается при настройке приложений Vue и Vuex.
Доступ к API устройства
Доступ к API устройства в нашем приложении Vue Native возможен благодаря богатой экосистеме React Native. Чтобы получить доступ к API геолокации устройства пользователя в нашем приложении, например, мы можем использовать expo-location следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<template> <view class="container"> <button :on-press="getLocation" title="Get Location" color="#184d47" accessibility-label="Get access to users' location" > <text>Location Details:</text> <text>{{ location }}</text> <text>Latitude: {{ latitude }}</text> <text>Longitude: {{ longitude }}</text> <text class="text-error">{{ errorMessage }}</text> </view> </template> <script> import * as Location from "expo-location"; export default { data() { return { location: "", latitude: "", longitude: "", errorMessage: "", text: "", user: { country: "", }, }; }, methods: { async getLocation() { try { let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== "granted") { this.errorMessage = "Permission to access location was denied"; return; } let location = await Location.getCurrentPositionAsync({}); this.location = location; this.latitude = location.coords.latitude; this.longitude = location.coords.longitude; this.errorMessage = ""; } catch (error) { this.errorMessage = error; } }, }, } </script> |
При использовании пакета Expo не требуются дополнительные конфигурации или настройки, что упрощает создание мобильного приложения с Vue Native.
Заключение
Создание мобильного приложения с помощью Vue Native открывает множество возможностей в создании кроссплатформенных мобильных приложений с помощью JavaScript.
Имея доступ к преимуществам экосистем Vue и React Native, разработчики могут писать компоненты .vue и интегрировать пакеты Expo и React Native в приложения практически без дополнительных настроек.
Полный код, используемый в этом руководстве, доступен на GitHub. Спасибо за чтение!
Автор: Ejiro Asiuwhu
Источник: blog.logrocket.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
