Как запустить react native в браузере
Обновлено: 07.07.2024
Я новичок, использующий React Native, но я не знаю, как запустить его в браузере, я пытался искать в google, но ничего не нашел, пожалуйста, дайте мне предложение о том, как запустить react native в браузере.
2 ответа
Что вы подразумеваете под запуском в браузере ? Если вы имеете в виду отображение журналов, да, вы можете это сделать, активировав удаленную отладку в своем симуляторе.
Но если вы говорите о отображении UI в браузере, то NO. react-native предназначен для разработки мобильных приложений, поэтому для отображения вашего приложения вам понадобится симулятор (android или ios зависит от вашего ноутбука).
P.S: Я советую вам Expo вам будет легче, так как вы новичок
Вы не можете запускать react native приложения в браузере ,но ,поскольку я предполагаю, что у вас есть смартфон, вы можете создать приложение React Native с помощью Expo и протестировать его на своем телефоне.
Expo на самом деле рекомендуется, если вы новый разработчик на RN .
Вы должны использовать create-react-native-app для создания своего приложения, а затем после запуска npm просто отсканируйте код QR со своего смартфона(вам также нужно будет загрузить expo) и вуаля!
Похожие вопросы:
Понимая, что React Native приложений предназначены для разработки / тестирования с использованием симуляторов, можно ли использовать веб-браузер также для тестирования приложения? Такие сервисы, как.
Я новичок в React и React-Native я пытаюсь открыть приложение React-native, которое я клонировал из github. Я сделал установку npm и запустил npm в командной строке. Он говорит: Running Packager on.
Я новичок в вопросах React Native. Я создал проект react-native через react-native init projectname У меня это работает на моем эмуляторе android studio. Теперь я хочу запустить его в своем.
Я хотел бы знать, возможно это или нет. Я хочу, чтобы запустить приложение react native в АРМ рабочее место. В настоящее время, когда я пытаюсь запустить react-native run-android в aws workspace, он.
Я создал полное автономное веб-приложение ReactJS и хочу запустить его из приложения android из веб-представления с помощью React-Native. Для этого я выполнил следующую процедуру: 1. Я создал.
У меня есть требование,в котором у меня есть приложение React-Native (первичное Приложение),а также наличие игрового приложения(вторичного приложения), которое также разработано в React-native.
Я использую react-native-webview-quilljs для отображения форматированного текста HTML. Он отлично работает на Android и iOS, но не поддерживается в Интернете (т. е. react-native-web / expo-web ).
Решив начать разрабатывать приложения на React Native, я столкнулся с проблемами разворачивания окружения. Сегодня я хочу поделиться опытом его настройки.
Конечно, на официальном сайте есть подробное описание, но следуя только этим рекомендациям, было довольно сложно сделать все настройки.
Итак, начнём:
Node, Python2, JDK
- Установить NodeJS. У меня последняя версия на момент написания статьи 10.11.0
- Установить Python2 и JavaSE. Использовался jdk-10.0.2
React Native CLI
Android development environment
После запуска выбираем кастомную установку
Далее отмечаем галочкой «Android Virtual Device» и указываем пусть до папки Android — либо оставляем как есть C:\Users\%USERNAME%\AppData\Local\Android\Sdk
Главное, чтобы в пути не было кириллицы!
Особенно с этим могут возникнут проблемы в будущем. Например, у меня имя пользователя системы было на кириллице «C:\Users\Александр», и после запуска приложения grandle не мог найти путь, т. к. путь выглядел как «C:\Users\. \. »
На вкладке «SDK Platforms» включаем галочку «Show Package Details» и для «Android 8.0 (Oreo)» устанавливаем:
Теперь выбираем вкладку «SDK Tools», включаем галочку «Show Package Details»
и устанавливаем пакет
Переменные среды
-
ANDROID_HOME
Создадим переменную для ANDROID_HOME:
- Имя переменной: JAVA_HOME
- Значение переменной: C:\Program Files\Java\jdk-(версия)
Добавим 4 значения:
- %JAVA_HOME%\bin
- %ANDROID_HOME%
- %ANDROID_HOME%\platform-tools
- %ANDROID_HOME%\watchman
Создаем приложение и запускаем эмулятор
- Переходим в удобную для нас папку в консоли и набираем:
react-native init MyTestProject - Открываем в Android Studio наш проект и открываем AVD Manager
В этой статье использовались официальное руководство от React Native
+ личный опыт!
Надеюсь, эта статья поможет тем, кто столкнулся с проблемами или решил начать разрабатывать нативные приложения на React
У меня есть React Native код в виде строки, есть ли какой-то сервис или еще что-то, что позволило отдав эту строку, получить ссылку, где уже можно изучить результат запуска этого кода, какой-либо эмулятор.
Насколько я понимаю, это возможность создавать web-приложения на react native, мне же нужно найти способ запустить код react native для мобилок.
mizzo, в общем случае невозможно.
Берёте эмулятор андроида и запускаете локально.
Василий Банников, я знаю, что они использовался appetize.io, но appetize требует билд приложения, как его сделать - непонятно
Василий Банников, у меня же всего лишь строка, я вам дал это понять еще с самого начала.
Василий Банников, а каким образом draftbit билд получили то? У них же web'е это работает.
Василий Банников, они каждый раз компилирует у себя тот дизайн, который я создам? Через сервер что-ли?
mizzo, а как ещё?
Каким образом вообще у вас строка с кодом приложения взялась?
Василий Банников, я не понимаю вас, я попросил помощи у сообщества, вы ответили мне, что моя задача не решаема, теперь она оказалась решаемой, так вы поможете мне? Привести пример того, как можно решить задачу, пожалуйста?
mizzo, смотря в каком виде у вас строчка кода.
Обычно же код приложения - это куча файлов
Сообщество DevSchacht растёт, накапливает контент и завоёвывает преданных читателей. В свою очередь последние всегда желают получать информацию быстро и удобно. А лучше сразу на своё мобильное устройство. Можно сделать сайт, а можно пойти дальше и создать полноценное приложение, которое будет уведомлять о новых статьях, кешировать их и позволит читать там, где нет мобильной связи (например, в метро).
И тут у нас есть два варианта: новый кленовый PWA и старое доброе нативное приложение. К сожалению, PWA пока не работают полноценно на iOS (как минимум до появления сервис-воркеров в Safari). А написание нативных приложений требует знаний незнакомых нам технологий. Но мы фронтендеры и не хотим учить Java и Swift. Мы хотим React, CSS и в продакшен, и благодаря компании Facebook у нас есть всё, для того, чтобы реализовать наше желание.
В этой серии статей мы постараемся шаг за шагом разработать мобильное приложение DevSchacht на 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, но вместо веб-элементов, таких как <div> или <span> , мы используем React-компоненты. В данном случае <Text> является встроенным компонентом, отвечающим за отображение текста.
Этот код определяет новый компонент App . Все, что вы видите на экране - это набор компонентов. Компонент может быть довольно простым: единственное, что требуется, это функция рендеринга, возвращающая JSX. В следующий раз я покажу как можно писать компоненты в более компактном стиле.
Читайте также: