Найти в Дзене
✨CodeWizard✨

Приложения для телефона на JS? Легко с React Native

Я уже писал приложения для ПК, но решил не останавливаться, и сделать приложение для телефона, в этом посту:
Сделаем два приложения, Hello, World и резюме! https://expo.io/ Тут можно писать всё прямо в браузере, так-что Hello, World напишем там! Тут подробная документация, так что по ходу советую посматривать! Начнём с создания нового snack'а, просто зайдём на сайт https://snack.expo.io, и нам покажет пример, но нам он не нужен, можете полностью стереть текст что там! Для начала рассмотрим шаблон: Хотя expo советует: В react теги отличаются, вместо популярного div там View, вместо p и h1,2,3,4,5,6 там Text, а если всё не обернуть в ScrollView, то контент не поместившийся в экран не посмотреть, скрола не будет, ну и так далее! Кроме изменения html, есть и css, который изменился меньше, но и его стало сложнее узнать, например: Да это css, вместо ; теперь , , а вместо - следующее слово с большой буквы😂 Начнём писать, вот ссылка на первый пример - Hello, World: https://snack.expo.io/

Я уже писал приложения для ПК, но решил не останавливаться, и сделать приложение для телефона, в этом посту:
Сделаем два приложения,
Hello, World и резюме!

https://expo.io/

Тут можно писать всё прямо в браузере, так-что Hello, World напишем там!

Тут подробная документация, так что по ходу советую посматривать!

-2

Начнём с создания нового snack'а, просто зайдём на сайт https://snack.expo.io, и нам покажет пример, но нам он не нужен, можете полностью стереть текст что там!

Для начала рассмотрим шаблон:

Хотя expo советует:

В react теги отличаются, вместо популярного div там View, вместо p и h1,2,3,4,5,6 там Text, а если всё не обернуть в ScrollView, то контент не поместившийся в экран не посмотреть, скрола не будет, ну и так далее!

Кроме изменения html, есть и css, который изменился меньше, но и его стало сложнее узнать, например:

-3

Да это css, вместо ; теперь , , а вместо - следующее слово с большой буквы😂

Начнём писать, вот ссылка на первый пример - Hello, World:

https://snack.expo.io/@vsevolod_html/hello,-world!

-4

Стилей там немного, поэтому всё оставил в тегах, выглядит код как-будто скрестили js и html =)

Думаю особо тут сложного нету, тег Text с текстом, тег View с Image, и всё в ScrollView на всякий случай.

Теперь сделаем резюме, буду основываться я на vsevolodhtml.ru, вот что вышло у меня:

https://snack.expo.io/@vsevolod_html/vsevolodhtml.ru

Код оставлю на ваше рассмотрение, и предлагаю прислать свои примеры в комментариях!

Это не конец, что за приложение, которое нельзя установить? Предлагаю скачать то что вы написали в expo, и открыть в редакторе и командной строке! Надеюсь у вас стоит Node js, если нет скачайте!

Открыв командную строку, введите:

npm install -g expo-cli
npm install -g expo
npm i
npm start

По очереди!

Теперь если всё хорошо, откроется сайт:

-5

Нажмём, подождём, и откроется сайт из вашего кода, тут можно тестить код перед сборкой:

Теперь введите:

expo build:android

Потыкайте пункты apk и y, и после всего вы получите ссылку на скачивание!