Стабильный:
Предварительный просмотр:
- React Native Tools Preview
- О расширении
- Hermes (Android)
- Приложения iOS
- Устройства iOS
- Пользовательская схема для приложений iOS
- Прямая отладка iOS
- Приложения Expo
- Настройка Expo
- React Native для Windows
- Как для запуска и отладки приложения React Native для Windows
- Как подключиться к запущенному React Native для приложения Windows
- React Native для macOS
- TypeScript и Haul
- Sourcemaps
- Отладка Haul
- Свойства конфигурации отладчика
- Ведение журнала
- Скомпилируйте APK и сгенерируйте пакет
- Указание настраиваемых аргументов для react-native run- * command
- Настройка React Native packager
- Пользовательские переменные среды
- Изменить корень проекта
- Настроить Android LogCat Monitor
- Изменить язык на JSX в Visual Studio Code
React Native Tools Preview
У расширения есть ночная версия, которая выпускается ежедневно в 21:00 по тихоокеанскому стандартному времени каждый день, когда происходят изменения. Во избежание конфликтов, если установлены оба расширения, будет активирована единственная стабильная версия. Итак, чтобы использовать предварительную версию, необходимо отключить или удалить стабильную версию и перезагрузить VS Code.
О расширении
Это расширение VS Code предоставляет среду разработки для проектов React Native. Используя это расширение, вы можете отлаживать свой код и быстро запускать команды react-native
из палитра команд.
- React Native Tools Предварительный просмотр
- О расширении
- Начало работы
- Команды React Native на палитре команд
- Отладка Приложения React Native
- Приложения Hermes (Android)
- Приложения iOS
- Устройства iOS
- Пользовательская схема для приложений iOS
- Прямая отладка iOS
- Приложения Expo
- Настройка Expo
- Приложения Windows
- приложения macOS
- Приложения на основе TypeScript и Haul
- Отладчик con свойства конфигурации
- Настройка
- Ведение журнала
- Соберите APK и сгенерируйте пакет
- Указание настраиваемых аргументов для команды
run- *
- Настройка упаковщика React Native
- Изменить проект root
- Настроить Android LogCat Monitor
- Разработка внутри контейнера Docker
- Участие
- Известные проблемы
Прежде чем идти дальше, убедитесь, что у вас:
- рабочая среда React Native. .
- используют VS Code и установили это расширение из Marketplace.
- откройте корневую папку проекта React Native в VS Code.
Обратите внимание, что расширение использует каталог .vscode/.react
в корне проекта для хранения промежуточных файлов, необходимых для отладки. Хотя эти файлы обычно удаляются после завершения сеанса отладки, вы можете добавить этот каталог в файл .gitignore
вашего проекта.
В палитре команд введите React Native
и выберите команду.
Команда Run Android запускает react-native run-android
и запускает ваше приложение для Android.
Команда Run iOS аналогичным образом запускает run-ios для реакции
и запускает ваше приложение в симуляторе iOS (например, iPhone 6)..
Команды Packager позволяют запускать/останавливать Metro Bundler (ранее React Packager).
Полный список команд:
Имя | Описание |
---|---|
Запустить эмулятор Android | Предлагает вам выбрать имя доступного эмулятора и запустить его. Если в системе установлен только один эмулятор, он будет выбран автоматически |
Запустить Android на эмуляторе | Запустить приложение Android на эмуляторе. Порядок запуска: проверка поддержки целевой платформы, загрузка аргументов запуска, запуск Packager, запуск приложения во всех подключенных эмуляторах |
Запуск Android на устройстве | Запустить приложение Android на устройстве. Порядок запуска: проверка поддержки целевой платформы, загрузка аргументов запуска, запуск Packager, запуск приложения на всех подключенных устройствах |
Запуск iOS на симуляторе | Запустите приложение iOS на Simulator. Порядок запуска: загрузка аргументов запуска, проверка поддержки целевой платформы, запуск Packager, запуск приложения только в одном подключенном эмуляторе |
Запуск iOS на устройстве | Запустить приложение iOS на устройстве. Порядок запуска: загрузка аргументов запуска, проверка поддержки целевой платформы, запуск Packager, запуск приложения только на одном подключенном устройстве |
Run Expo | Запустить приложение Exponent. Порядок запуска: вход в экспоненту, загрузка аргументов запуска, запуск Packager, запуск приложения |
Start Packager | Запуск Packager в контекстном проекте папка рабочей области |
Stop Packager | Stop Packager |
Перезапустить упаковщик | Перезапустить упаковщик |
Опубликовать на Expo | Опубликовать на Exponent Host. Порядок запуска: войдите в экспоненту, выполните команду Run Expo , затем опубликуйте приложение на хосте |
Показать меню разработчика | Показать меню разработки для запуска приложения на устройстве iOS или Android или в эмуляторе |
ReloadApp | Перезагрузить приложение |
Run Element Inspector | Загрузить инструменты разработки для проверки элементов пользовательского интерфейса приложения |
Запустить React Native LogCat Monitor | Создает LogCat Monitor для выбранного онлайн-устройства Android, чтобы просмотреть журналы LogCat устройства. Аргументы фильтрации по умолчанию: [«*: S», «ReactNative: V», «ReactNativeJS: V»]. Как настроить фильтрацию. |
Остановить React Native LogCat Monitor | Останавливает существующий LogCat Monitor и удаляет его выходной канал |
Чтобы начать отладку, создайте новую конфигурацию отладки для вашего приложения ReactNative в вашем .vscode/launch.json
. Добавить новую конфигурацию можно, открыв файл launch.json
, нажав кнопку Добавить конфигурацию ...
и выбрав соответствующую конфигурацию отладки.. Доступ ко всем доступным конфигурациям отладки для ReactNative можно получить, набрав ReactNative и выбрав одну из списка, заполненного Intellisense, как показано на изображении ниже.
Если вы не создали .vscode/launch.json
файла, вы можете добавить полный набор конфигурации отладки по умолчанию. Для этого щелкните значок отладки на панели просмотра, а затем щелкните значок конфигурации (шестеренки)
, затем выберите среду отладки React Native.
VS Code сгенерирует launch.json
в вашем проекте с некоторыми настройками конфигурации по умолчанию, как показано ниже. Вы можете безопасно закрыть этот файл, выбрать подходящую конфигурацию в раскрывающемся списке «Конфигурация», а затем нажать F5 (или нажать Зеленая стрелка ), чтобы начать отладку приложения в VS Code.
После загрузки и запуска приложения откройте меню разработчика внутри приложения и включите удаленную отладку, нажав кнопку Удаленная отладка JS
.
Расширение позволяет вам отлаживать несколько устройств и конфигураций. Пожалуйста, прочтите следующие разделы для получения дополнительной информации для вашего конкретный вариант использования.
Hermes (Android)
Hermes — это новый движок JavaScript, оптимизированный для запуска приложений React Native на Android. Это улучшает производительность приложения и уменьшает размер приложения.
Нажмите здесь, чтобы узнать больше о Hermes.
Отладка приложений с включенным Hermes в настоящее время является экспериментальной. Пожалуйста, просмотрите эту проблему, чтобы узнать о текущих известных проблемах в поддержке Hermes.
Для отладки при использовании движка Hermes выберите одну из следующих конфигураций отладки:
- React Native Direct: отладка Android Hermes — экспериментальная
{"name": "Отладка Android Hermes - экспериментальная", "cwd": "$ {workspaceFolder } "," тип ":" reactnativedirect "," запрос ":" запуск "," платформа ":" android "}
- » React Native Direct: Присоединить к React Native Hermes — экспериментальный
{"name": "Присоединить к React Native Hermes - экспериментальный", "cwd": "$ {workspaceFolder } "," type ":" reactnativedirect "," request ":" attach "}
Приложения iOS
Устройства iOS
Отладка на устройстве iOS требует следующих действий вручную:
- Установите ios-deploy
npm install -g ios-deploy
. - Установите действующий сертификат разработки iOS.
- В
вашего проекта запускать. json
дляtarget
установленоустройство
. Если вам нужно указать точное устройство для запуска, вы можете установить дляtarget
значениеdevice=
, или вы также можете использоватьrunArguments
, чтобы указать конкретное устройство для запуска в случае подключения нескольких устройств (например,"runArguments": ["--device", "My iPhone"]
) - Выберите вариант Отладка iOS в раскрывающемся списке «Конфигурация» и нажмите F5.
- Встряхните устройство, чтобы открыть меню разработки, и выберите «Отладка JS удаленно».
Пользовательская схема для приложений iOS
Если вы хотите использовать пользовательскую схему для своего приложения вы можете либо передать его как часть аргументов параметра runArguments
, либо установить параметр конфигурации scheme
, как показано ниже:
"runArguments": ["--scheme", "customScheme", ...]//или "runArguments": ["--scheme = customScheme", ...]//или "scheme": "customScheme"
Имейте в виду, указывая значение схемы как часть аргументов параметра runArguments
переопределит значение параметра конфигурации scheme
, если оно задано.
Прямая отладка iOS
Расширение обеспечивает экспериментальную поддержку прямой отладки iOS. Подробнее см. Здесь: react-native-community/discussions-and-предложения # 40, react-native-community/sessions-and-предложения # 206
Чтобы иметь возможность отлаживать приложение iOS напрямую , вам необходимо установить ios-webkit-debug-proxy:
- Установите HomeBrew на свой Mac.
- Откройте терминал и запустите
brew install ideviceinstaller ios-webkit-debug-proxy
Для прямой отладки приложений iOS можно использовать следующие сценарии отладки:
- React Native Direct: отладка Direct iOS — экспериментальная
"name": "Прямая отладка iOS - экспериментальная", "cwd": " $ {workspaceFolder} "," type ":" reactnativedirect "," request ":" launch "," platform ":" ios "," port ": 9221
- React Native Direct: присоединение к React Native iOS — экспериментальное
"name": "Присоединение к React Native iOS - экспериментальное", "cwd ":" $ {workspaceFolder} "," type ":" reactnativedirect "," request ":" attach "," platform ":" ios "," port ": 9221
Приложения Expo
Для отладки проекта, созданного с помощью Expo или задачи create-react-native-app
, вы можете использовать встроенную поддержку для Expo.
Подготовьте среду, следуя инструкциям по быстрому запуску Expo CLI. Для корректной работы с Expo это расширение требует Android SDK
. Также обратите внимание на вкладку React Native CLI Quickstart
, где вы можете найти руководство по установке Android SDK:
- Установите приложение Expo на целевое устройство или эмулятор.
- Убедитесь, что на вашем компьютере установлен
Android SDK
(вы можете установить его с помощьюReact Native CLI Quickstart
guide) - Убедитесь, что
expo-cli
установлен глобально (npm install -g expo-cli
)
Проверить, что все работает правильно и среда готова к использованию, можно с помощью команды npx react-native doctor
.
Чтобы начать отладку в Expo, выполните следующие действия:
-
Откройте свой проект в VS Code с установленным расширением.
-
Создайте конфигурацию отладки (как описано в разделе «Отладка приложений React Native»), выберите
Отладка в экспоненте
в раскрывающемся меню отладки и запустите отладка -
Подождите, пока s Некоторые зависимости настроены — расширение установит
Expo Development Library (@ expo/xdl)
, когда эта функция используется в первый раз. -
Если вы раньше не использовали Exponent в этой системе, вам будет предложено ввести имя пользователя и пароль Exponent. Учетная запись Exponent позволяет использовать облачные сервисы Expo. Более подробную информацию о том, как это работает, можно найти здесь. Если вы не создали учетную запись Exponent, то при указании нового имени пользователя и пароля она будет создана. Обратите внимание, что с учетной записью не связана никакая электронная почта и нет способа восстановить забытые пароль. Если вы не хотите создавать учетную запись Exponent, вы можете указать параметр
expoHostType
в своей конфигурации отладки, чтобы Expo работал локально (через локальную сеть или на localhost). -
После запуска упаковщика расширение откроет отдельную вкладку с QR-кодом для сканирования из приложения Exponent. Как только вы это сделаете, приложение Exponent подключится к упаковщику и запустит ваше приложение.
-
После загрузки и запуска приложения откройте меню разработчика и включите удаленную отладку, нажав кнопку
Удаленная отладка JS
.Отсюда вы можете запускать и отлаживать приложение как обычно.
Настройка Expo
Расширение поддерживает запуск через Exponent не только приложений, созданных с помощью Expo, но даже приложений на чистом React Native (в этом случае вам нужно добавить пакет expo
в node_modules
, чтобы он работал с Expo: npm install expo --save-dev
. В любом случае он использует app.json
файл конфигурации в корне проекта.
Если вы используете конфигурацию Debug in Exponent
или любую из команд палитры, например Run in Exponent
, Опубликуйте в Exponent
, тогда этот файл будет создан автоматически, если он отсутствует, или обновлен следующим разделом базовой конфигурации:
{"expo": {"slug": " MyApp ",//Заголовок проекта" name ":" MyApp ",//Название проекта" sdkVersion ":" 31.0.0 ",//Expo SDK версии" entryPoint ":" .vscode \ exponentIndex.js "//Точка входа для проекта}, "name": "MyApp"//Название проекта}
Полный список параметров конфигурации для раздела expo
в app.json
можно найти на официальной странице документации Expo.
Для запуска приложения pure React Native расширение создает и использует .vscode/exponentIndex.js
, который указывает на точку входа приложения ( index.js
или index.android.js
или index.ios.js
).
Если вы хотите изменить свой точка входа в приложение (например, от index.js
до index.android.js
), удалите .vscode/exponentIndex.js
, а затем перезапустите сеанс отладки.
ПРИМЕЧАНИЕ : расширение кэширует версию SDK экспоненты, используемую вашим проектом. Это полезно, поскольку мы не хотим устанавливать SDK каждый раз, когда вы запускаете экспоненту. Если вы хотите, чтобы расширение обновляло версию SDK на основе вашей версии React Native, просто перезапустите VS Code, и если оно поддерживается, оно должно работать. Если это не помогло, откройте проблему.
React Native для Windows
Как для запуска и отладки приложения React Native для Windows
Вы можете отлаживать приложения UWP и WPF React Native для Windows, изменив платформу
в вашем Конфигурация launch.json
:
-
Для
UWP
используйтеwindows
:{"name": "Debug UWP", "cwd": "$ {workspaceFolder}", "type": "reactnative", "request": "запуск "," platform ":" windows "}
-
Для
WPF
используйтеwpf
:{"name": "Отладка WPF", "cwd": "$ {workspaceFolder}", "type": "reactnative", "request ":" launch "," platform ":" wpf "}
Как подключиться к запущенному React Native для приложения Windows
-
Добавьте конфигурацию
Attach to packager
в.vscode/launch. json
в вашем проекте{"name": "Присоединить к упаковщику", "cwd": "$ {workspaceFolder}", "type": "reactnative "," request ":" attach "}
-
( Необязательно ) Запустите Metro packager с помощью команду
React Native: Start Packager
Command Palette или запустите командуnpx react-native start
в терминале в корневой папке проекта -
Выберите конфигурацию
Присоединиться к упаковщику
и нажмите кнопкуplay
. Если упаковщик Metro еще не запущен, расширение запустит его автоматически. -
Запустите приложение React Native Windows. Убедитесь, что приложение находится в режиме удаленной отладки.
Затем расширение должно подключиться к запущенному приложению.
Вы можете дополнительную информацию о том, как настроить приложение для работы с Windows, можно найти в React Native для Windows. Инструкция по началу работы
React Native для macOS
Вы можете отлаживать React Native для приложений macOS, изменив платформу
в конфигурации launch.json
на macos
:
{"name": "Отладка macOS", "cwd": "$ {workspaceFolder}", "type": "reactnative", "request": "запуск" , "platform": "macos"}
Чтобы присоединиться к работающему приложению macOS, вы можете использовать конфигурацию отладки Attach to packager
по умолчанию. Убедитесь, что приложение находится в режиме удаленной отладки.
{"name": "Присоединить к упаковщику", "cwd": "$ {workspaceFolder}", "type ":" reactnative "," request ":" attach "}
Дополнительную информацию о том, как настроить приложение для работы с macOS, можно найти в React Native для macOS. Инструкция по началу работы.
TypeScript и Haul
Sourcemaps
отладчик использует исходные карты, чтобы вы могли отлаживать исходные источники, но иногда исходные карты не создаются должным образом и требуются переопределения. В конфигурации мы поддерживаем sourceMapPathOverrides
, отображение исходных путей из карты источников в расположение этих источников на диске. Полезно, когда исходная карта неточна или не может быть исправлена в процессе сборки.
Левая часть сопоставления — это шаблон, который может содержать подстановочный знак и будет протестирован на соответствие Запись sourceRoot
+ sources
в исходной карте. Если он совпадает, исходный файл будет преобразован в путь с правой стороны, который должен быть абсолютным путем к исходному файлу на диске..
Ниже приведены несколько примеров того, как исходные карты могут быть разрешены в различных сценариях:
//webRoot =/Users/me/project "sourceMapPathOverrides ": {" webpack:///./~/* ":" $ {webRoot}/node_modules/* ",//Пример:" webpack:///./~/querystring/index.js "->" /Users/me/project/node_modules/querystring/index.js "" webpack:///./* ":" $ {webRoot}/* ",//Пример:" webpack:///./src/app .js "->"/Users/me/project/src/app.js "," webpack:///* ":" * ",//Пример:" webpack:///project/app.ts "- > "/project/app.ts" "webpack:///src/*": "$ {webRoot}/*"//Пример: "webpack:///src/app.js" -> "/Users/ me/project/app.js "}
Отладка Haul
Расширение предоставляет функциональные возможности для подключения к Haul приложения на базе упаковщика. Вы можете использовать сценарий Attach to packager
, чтобы присоединиться к приложению на основе Haul и отладить его. На данный момент сценарии запуска не поддерживаются. Дополнительную информацию можно найти в проблеме.
Вы можете подготовить свое приложение React Native для работы с Haul
, следуя инструкциям Haul Приступая к работе
guide.
Если вы используете устаревшую версию Haul
в качестве сборщика React Native вместо стандартного Metro, может потребоваться добавить sourceMapPathOverrides
в файл launch.json
.
Например:
{//Другие конфигурации "sourceMapPathOverrides": {"webpack:///./~/*": "$ {workspaceRoot}/node_modules/*", "webpack:///./*": "$ {workspaceRoot} /* "," webpack:///* ":" * "}}
Свойства конфигурации отладчика
Ниже приводится список всех свойств конфигурации, которые принимает отладчик в launch.json
:
Имя | Описание | Тип | По умолчанию |
---|---|---|---|
cwd |
Путь к корневому каталогу проекта. der | строка |
$ {workspaceFolder} |
sourceMaps |
Следует ли использовать исходные карты JavaScript для сопоставления сгенерированного связанного кода с его исходными источниками | boolean |
true |
sourceMapPathOverrides |
Набор сопоставлений для перезаписи местоположений исходных файлов из того, что указано на исходной карте, в их расположение на диске. Подробнее см. В Sourcemaps | object |
n/a |
enableDebug |
Следует ли включать режим отладки. Если установлено значение «false», приложение будет запускаться без отладки | boolean |
true код> |
webkitRangeMin , webkitRangeMax |
Комбинирует, чтобы указать диапазон портов, который должен использоваться ios-webkit-debug-proxy для поиска конкретного устройства, описанного в конфигурации прямой отладки iOS | 9223, 9322 | |
trace |
Уровень ведения журнала в процессе отладчика. Может пригодиться для диагностики. Если установлено значение «Trace», все журналы процесса отладчика будут доступны в Debug Console окне вывода |
string |
log |
адрес |
TCP/IP-адрес упаковщика, к которому нужно присоединиться для отладки | string |
localhost |
порт |
Порт упаковщика для подключения для отладки | string |
8081 |
remoteRoot |
Исходный корень удаленного хоста | string |
null |
localRoot |
Корень локального источника, который соответствует ‘remoteRoot’ | string |
$ {workspaceFolder } |
skipFiles |
Массив имен файлов или папок, или шаблоны глобуса, чтобы пропустить при отладке | массив |
inventory |
debuggerWorkerUrlPath |
Путь к работнику отладчика приложения, который нужно переопределить. Например, если отладчик пытается подключиться к http://localhost: 8081/debugger-ui/debuggerWorker.js, и вы получаете ошибку 404 в выводе упаковщика, тогда вы можете изменить debuggerWorkerUrlPath на другое значение, подходящее для вашего упаковщика («debugger- ui «будет заменено указанным вами значением) | string |
debugger-ui/ |
платформа |
Платформа для таргетинга. Возможные значения: android , ios , exponent , windows , wpf |
строка |
n/a |
target |
Цель для запуска. Возможные значения: simulator , device , device = , , , , код>. Если значение равно |
string |
simulator |
logCatArguments |
Аргументы, которые будут использоваться для LogCat (вывод LogCat появится на выходном канале). Это может быть такой массив, как: [": S", "ReactNative: V", "ReactNativeJS: V"] |
массив |
["*: S", "ReactNative: V", "ReactNativeJS: V"] |
runArguments |
Аргументы выполнения, передаваемые в react-native run- команда (переопределить все остальные параметры конфигурации) |
array |
n/a |
launchActivity |
Действие Android, запускаемое для отладки, например он указывает параметр - main-activity в response-native аргументы запуска |
строка |
MainActivity |
expoHostType |
Тип подключения, который будет использоваться при отладке Expo для связи с устройством или эмулятором. Возможные значения:
|
строка |
туннель |
env |
Переменные среды, переданные отладчику и response-native run- команда |
объект |
{} |
envFile |
Абсолютный путь к файлу, содержащему определения переменных среды | строка |
$ {workspaceFolder}/. env |
variant |
Вариант, который будет передан в react-native run-android , например используйте devDebug , чтобы указать --variant=devDebug |
string |
n/a |
scheme |
Имя схемы, которая будет передается в run-ios для реагирования , например devDebug , чтобы указать --scheme=devDebug |
string |
n/a |
productName |
Отображаемое имя пакета iOS, например Значение AwesomeProject означает, что расширение будет искать AwesomeProject.app bundle |
string |
n/a |
Расширение можно дополнительно настроить для других сценариев React Native.. Это наиболее распространенные:
Ведение журнала
Ведение журнала расширения разделено на несколько выходных каналов:
- React Native — основной канал расширения, который собирает выходные данные от React Native Packager и показывает критические ошибки в расширении.
- Эти каналы создаются только при выполнении определенного сценария запуска :
- React Native: запустите Android
- LogCat monitor (для получения выходных данных LogCat с устройства Android можно отфильтровать с помощью параметров конфигурации отладки)
- React Native: запускать iOS
- React Native: запускать macOS
- React Native: запускать экспоненту
- React Native: запустите Android
- Консоль отладки, которая используется для получения журналов приложений и журналов, созданных адаптером отладки (
console.log
и другиеstd
выводятся из приложения) - Подробные журналы отладчика расширения (эти журналы отображаются, только если в сценариях отладки включен параметр
trace: "verbose"
)- React Nati ve Chrome Proxy — показывает, что выполняется в отладчике и приложении.
- Консоль отладки становится более информативной и содержит некоторую отладочную информацию из адаптера отладки.
- Глобальные ошибки расширения контролируются VS Code и печатаются в инструментах разработчика VS Code.
Существуют также некоторые технические журналы глобальных расширений, которые могут отображаться на выходе. Чтобы увидеть их, установите следующие свойства:
{"react-native-tools": {"logLevel": "Trace"}}
logLevel
может иметь значение None
(без журналов), Error
, Предупреждение
, Info
, Debug
, Trace
(все журналы). По умолчанию: Info
.
Скомпилируйте APK и сгенерируйте пакет
Вы можете добавить задачи VSCode для создания файла .apk
и создания пакетов iOS/Android.
Ниже приводится пример файла tasks.json
для проектов response-native init
. Поместите его в папку .vscode
в своем проекте, чтобы использовать:
{"версия": "2.0.0", "презентация": {"показывать": "всегда", "панель": "новый"}, "задачи": [{"taskName": "Сборка APK Отладка "," group ":" build "," type ":" shell "," windows ": {" command ":" cd android; if ($?) {./gradlew assemblyDebug} "}," linux ": { "command": "cd android && ./gradlew AssemblyDebug"}}, {"taskName": "Build APK Release", "group": "build", "type": "shell", "windows": {"command ":" cd android; if ($?) {./gradlew assemblyRelease} "}," linux ": {" command ":" cd android &&./gradlew assemblyRelease "}}, {" taskName ":" Создать пакет Android "," group ":" build "," type ":" shell "," command ":" react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/main.jsbundle "}, {" taskName ":" Создать пакет iOS "," group ":" build "," type ":" shell "," команда ":" response-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle "}]}
Чтобы узнать больше о задачах
в VSCode, прочтите официальную документацию.
Посетите страницу создания подписанного APK, чтобы узнать больше по этой теме.
Указание настраиваемых аргументов для react-native run- *
command
Использование настраиваемых аргументов запуска для react -native run-
: ПРИМЕЧАНИЕ. Это переопределяет все другие параметры конфигурации.
{"react-native. android.runArguments.simulator ": [" --appFolder ","/Users/test/AwesomeProject/android/app "," --deviceId "," emulat or-5555 "]," react-native.ios.runArguments.device ": [" --project-path "," ios "," --device "," Max's iPhone "]}
ПРИМЕЧАНИЕ. Вы можете получить список установленных устройств симулятора с помощью:
устройств iOS (только macOS):
xcrun simctl list --json devices
Android-устройства:
adb-устройства
ПРИМЕЧАНИЕ. Если вы хотите запустить приложение на устройстве iOS, убедитесь, что у вас установлен ios-deploy
. глобально.
npm install -g ios-deploy
Настройка React Native packager
Чтобы использовать настраиваемый порт для упаковщика react-native
:
{"react-native ": {" packager ": {" port ": portNumber}}}
Если вы измените этот порт, то для устройств iOS и сценариев симулятора вам придется изменить собственный код файлы. Инструкции здесь.
Если вы используете Android, вам необходимо изменить сервер отладки:
-
CTRL + M
(CMD + M
) в эмуляторе. - Перейдите в
Настройки разработчика
- Хост сервера отладки для устройства => введите
localhost:
. - Перезагрузите приложение (дважды нажмите
R
) - (только Hermes) движок Hermes по умолчанию прослушивает порт 8081 для отладки, чтобы изменить его, вам может потребоваться изменить файл
metro.config.js
, добавив"port": аргумент portNumber
в настройках сервера.
//Пример metro.config.jsmodule.exports = {server : {port: 9091,},};
Инструкция по настройке порта
ПРИМЕЧАНИЕ. Некоторые аспекты React Native жестко устанавливают порт на значение по умолчанию как указано в этой проблеме.
Пользовательские переменные среды
Расширение поддерживает передачу пользовательских переменных среды в контекст процесса React Native Packager. Чтобы добавить пользовательские переменные, вы можете создать файл .env
в корневой папке вашего проекта и добавить необходимые переменные среды в следующем формате:
Variable1_name = Variable1_valueVariable2_name = Variable2_value
Переменные, объявленные в этом файле .env
, могут переопределять исходные переменные среды из процесса . env
процесса Packager.
Можно передавать переменные среды (с помощью аргументов env
и envFile
в launch.json
) из lau nch
или прикрепите
сценарии отладки к Packager. Если эти переменные определены, они будут использоваться, в противном случае используется файл .env
.
Изменить корень проекта
Чтобы указать подпапку, в которой находится проект, поддерживающий реакцию, установите react-native-tools.projectRoot
. Здесь вы можете использовать абсолютный или относительный путь:
{"react-native-tools": {"projectRoot": "./your/react-native/project" }}
Настроить Android LogCat Monitor
Есть два способа отфильтровать вывод LogCat Monitor в зависимости от как был запущен LogCat Monitor:
- Поскольку LogCat Monitor запускается для всех сценариев запуска Android по умолчанию, вы можете добавить
logCatArguments
в свой сценарий отладки в файлеlaunch.json
, как в следующем примере:
{"name": "Debug Android", "cwd ":" $ {workspaceFolder} "," type ":" reactnative "," request ":" launch "," platform ":" android "," logCatArguments ": [" ReactNativeJS: V "]}
- Если вы хотите запустить LogCat Monitor из команды Command Pallette
React Native: запустите React Native LogCat Monitor
с установленными параметрами фильтрацииresponse-native.android.logCatArguments
в настройкахgs.json
:
{"response-native.android.logCatArguments": ["*: S", "ReactNative: V", "ReactNativeJS: V"]}
Чтобы лучше понять, как работает фильтрация LogCat, примите во внимание, что расширение запускает LogCat с флагом -s
а затем добавляет в качестве аргументов пользовательские фильтры. См. Официальную инструкцию о том, как работает фильтрация LogCat.
Расширение поддерживает функции удаленной разработки VS Code в Linux.. Следуйте официальной документации VS Code, чтобы настроить свою среду для использования подхода удаленной разработки.
Вы можете использовать официальный образ React Native Docker, предоставленный сообществом react-native-community.
Вот шаги для запуска отладки React Native внутри Docker-контейнера на реальном устройстве Android:
-
Откройте палитру команд и выполните следующую команду
Удаленные контейнеры: добавить файлы конфигурации контейнера разработки ...
Затем выберите
Существующий файл Dockerfile
для создания файла конфигурации.devcontainer/devcontainer.json
. -
Создать файл Docker, расширяющий образ responsenativecommunity/response-native-android . Например, вы можете использовать следующий файл Docker:
FROM responsenativecommunity/response-native-android: latestRUN npm install -g expo-cli react-native-cli
-
Настройте файл
devcontainer.json
по мере необходимости. Ниже приведен пример конфигурации:{"name": "React Native Android Container",//Устанавливает контекст выполнения на один уровень выше вместо папки .devcontainer. "context": "..",//Обновите свойство 'dockerFile', если вы не используете стандартное имя файла 'Dockerfile'. "dockerFile": "Dockerfile",//Необязательное свойство runArgs можно использовать для указания дополнительных аргументов времени выполнения. "runArgs": ["--privileged",//передаем все возможности контейнеру, другими словами, контейнер может делать почти все, что может делать хост "--net", "host",//перенаправляя все порты хост-машины «-v», «/dev/bus/usb:/dev/bus/usb»//монтировать подключенные USB-устройства к контейнеру], «settings»: {//Это будет игнорировать пользовательские настройки локальной оболочки для Linux, поскольку оболочки, подобные zsh, обычно//не входят в базовые образы контейнеров. Вы также можете обновить это до конкретной оболочки, чтобы убедиться, что VS Code//использует правильную оболочку для терминалов и задач. Например,/bin/bash (или/bin/ash для Alpine). "terminal.integrated.shell.linux": null},//Добавьте идентификаторы расширений, которые вы хотите установить при создании контейнера в массиве ниже. "extensions": ["msjsdiag.vscode-react-native"]}
-
Откройте палитру команд и выполните следующую команду
Удаленные контейнеры: откройте папку в контейнере
, чтобы повторно открыть ваш проект в контейнере -
Подключите устройство через USB и начните отладку так же, как на локальном компьютере.
В настоящее время описанный выше сценарий не работает в macOS и Windows. Реализация контейнера Docker в этой ОС использует инструменты виртуальной машины, которые могут иметь проблемы с пересылкой USB для мобильных устройств.
Для получения дополнительной информации см. Наше вспомогательное руководство..
Вот список распространенных известных проблем, которые могут возникнуть при использовании расширения:
Проблема | Описание |
---|---|
Отладчик не останавливается на точках останова | Точки останова требуют правильной настройки исходных карт. Если вы используете TypeScript, обязательно следуйте разделу Начало работы , чтобы узнать, как правильно настроить исходные карты. Кроме того, аналогичные проблемы могут возникать в React Native версии 0.58. * в некоторых особых случаях (см. # 928, # 907), при изменении версий зависимостей react и Пакет react-native для более поздних версий должен решить эти проблемы. Если вы работаете в Linux, убедитесь, что открываемая папка проекта не является символической ссылкой на настоящую папку, это может вызвать проблемы с исходными картами (см. # 1456) |
‘adb: command not found’ | Если вы получаете сообщение об ошибке adb: command not found , вам необходимо обновить системный путь, включив в него расположение исполняемого файла ADB . Исполняемый файл ADB находится в подкаталоге вместе с другими файлами Android SDK. |
Таргетинг на iPhone 6 не работает | Была известная проблема с React Native (# 5850), но она была исправлена. Пожалуйста, обновите свою версию React Native. |
Не удается подключиться к каналу сокетов | (только для Linux) Если у вас два открываются рабочие области, которые отличаются только корпусом, расширение не сможет эффективно взаимодействовать. |
Кнопка «Добавить конфигурацию» не работает при попытке добавить конфигурацию отладки в launch.json |
Вам необходимо вручную добавить некоторую конфигурацию json в launch.json . См. (# 985). |
Ошибка Ни один из этих файлов не существует: * .vscode/exponentIndex появляется при запуске Реагируйте на собственные приложения через Expo |
В некоторых конфигурациях проекта (в основном в macOS) могут возникнуть проблемы с запуском приложения RN через Expo в первый раз. Вы можете решить эту проблему, явно добавив module.exports.watchFolders = ['.vscode']; в вашу конфигурацию Metro. Это поможет сборщику Metro найти настраиваемую точку входа, созданную расширением, необходимое для работы с Expo. Подробнее см. В описании проблемы (№ 1327). |
Known-Issues предоставляет полный список активных и решенных проблем.
Расширение VS Code React Native собирает данные об использовании и отправляет их в Microsoft, чтобы помочь улучшить наши продукты и услуги. Прочтите наше заявление о конфиденциальности, чтобы узнать больше.
Если вы не хотите отправлять данные об использовании в Microsoft, отредактируйте файл VSCodeTelemetrySettings.json
в ~/.vscode-react-native
и добавьте optIn: false
.
В этом проекте принят Кодекс поведения с открытым исходным кодом Microsoft.. Для получения дополнительной информации см. Часто задаваемые вопросы о Кодексе поведения или обращайтесь по адресу opencode@microsoft.com с любыми дополнительными вопросами или комментариями.
Изменить язык на JSX в Visual Studio Code
Visual Studio Code теперь поддерживает JSX в версии 0.8, но похоже, что единственный способ активировать его — использовать расширение файла .jsx
. В списке нет возможности изменить языковой режим вручную, ближайший вариант — JavaScriptReact
, но он не анализирует теги JSX.
Я в проекте с большим количеством файлов .js
с JSX, и я не могу его изменить.
Есть ли другой способ использовать синтаксис JSX без .jsx
extension?
Измените свои пользовательские настройки или настройки рабочего пространства, как показано ниже:
//Поместите свои настройки в этот файл, чтобы перезаписать настройки по умолчанию {"files.associations": {"* .js": "javascriptreact"}}
Примечание: вам может потребоваться для перезапуска VSCode.
Я мог бы сделать это, но «не файлы React JS» также отображаются в режиме JavaScriptReact.
- открыть файл C: Program Files (x86) Microsoft VS Code resources app plugins vs.language.javascript syntaxes javascriptreact.json (возможно, нужно открыть w с правами администратора.)
- замените «jsx» на «js» в массиве «fileTypes».
- перезапустите приложение, закройте открытые файлы js и снова откройте.
-
3Для всех, кому интересно, на Mac путь:/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.tmLanguage — Майк Лентини 10 нояб., 15:52
-
1У меня сработало. на Mac добавлен «js» также в список массивов в этом файле:/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.t mLanguage
jsx js
— Джо Редди, 23 ноя 2015, в 16:48 -
1для версии 0.10.1 в Windows10, файл в редактирование изменено.
C: Program Files (x86) Microsoft VS Code resources app extensions javascript package.json
. и добавьте". js"
вsizes.languages [0] .extensions
. — Кохей Сугимура, 24 ноя. 2015, в 0:24 -
@KoheiSugimura, ваше решение сработало, но мне также пришлось удалить .js из подключаемых языков [1] .extensions, и тогда оно сработало! — Rocklan 14 дек. ’15 в 0:51
Я мог бы это сделать, но «не файлы React JS» также отображаются в режиме JavaScriptReact.
- открыть файл C: Program Files (x86) Microsoft VS Code resources app plugins vs.language.javascript syntaxes javascriptreact.json (возможно, нужно открыть с правами администратора)
- замените «jsx» на «js» в массиве «fileTypes».
- перезапустите приложение, закройте открытые файлы js и снова откройте.
Я считаю, что приведенный ниже самый простой способ форматирования код
Щелкните в правом нижнем углу редактора кода VS, где написано Javascript.
Вы увидите параметр для выбора языкового режима, здесь вы можете выполнить поиск JavaScriptReact и выберите. Вот и все. Это должно решить вашу проблему.
1.

-
1Этот вопрос возник в то время, когда эта опция еще не существовала. Прямо сейчас это так просто, как вы сказали. — Уильям Грейсель, 15 августа ’19, 20:26
-
Почему я не вижу этого в нижней части редактора vs? У меня установлено последнее обновление vs community и последняя версия react. и все расширения обновлены. Вместо этого я вижу строку, показывающую одну ошибку компиляции, и стрелку влево/вправо, чтобы просмотреть ошибки, и строку github «добавить в систему управления версиями» синим цветом. — Эндрю Х, 14 июня ’20 в 20:01
-
Отлично работает, спасибо — JeffinJ 31 авг., 11:12
Мне кажется, что это самый простой способ форматирования кода.
Щелкните в правом нижнем углу на Редактор кода VS, где написано «Javascript».
Вы увидите вариант выбора языкового режима, здесь вы можете найти JavaScriptReact и выбрать. Вот и все. Это должно решить вашу проблему.
1.
Мне потребовалось некоторое время чтобы понять это, но — JSX уже является частью Emmet — который является частью VS Code. Я сказал Эммету также (дополнительно) сделать фрагменты JSX доступными в обычных файлах JS.
Просто вставьте это в вашем файле настроек:
"emmet.syntaxProfiles": {"javascript": "jsx"}
Мне потребовалось время, чтобы понять это но — JSX уже является частью Emmet, который является частью VS Code. Я сказал Эммету также (дополнительно) сделать фрагменты JSX доступными в обычном JS-файлы.
Просто поместите это в свой файл настроек:
"emmet.syntaxProfiles": {"javascript": "jsx"}
Теперь есть Расширение VS Code, которое позволяет обрабатывать файлы .js
как файлы .jsx
.
К сожалению, файл readme для расширения также предупреждает:
при установке этого расширения вы потеряете всю существующую языковую поддержку, предусмотренную для файлов .js
К счастью, VS Code сейчас очень близка к принятию Salsa, а это значит, что скоро проблема js-is-jsx должна быть полностью решена.
-
2Ссылка 500 и плагин больше не доступны — Энди Рэй, 22 мая 2016 г., 1:04
Теперь существует расширение VS Code, которое позволяет обрабатывать файлы .js
как .jsx
файлы.
К сожалению, в файле readme для расширения также предупреждается:
при установке этого расширения вы потеряете вся существующая языковая поддержка предусмотрена для файлов .js
К счастью, VS Code сейчас очень близок к принятию Salsa, что означает, что вскоре проблема js-is-jsx должна быть полностью решена.
Хотя ответ Диониса работает, есть лучший способ сделать это в более поздних версиях Visual Studio Code.
Перейдите в File> Prefrences> Settings
, а затем прокрутите вниз и найдите «Emmet» открытым на вкладке, и вы должны увидеть следующий текст
//Включите сокращения Emmet на языках, которые не поддерживаются по умолчанию. Добавьте здесь сопоставление между языком и языком, поддерживаемым emmet. //Например: {"vue-html": "html", "javascript": "javascriptreact"} "emmet.includeLanguages": {},
Так что просто следуйте инструкциям и добавьте "emmet.includeLanguages": {"javascript": "javascriptreact"}
в json на правой панели (который перезапишет пользовательские настройки).

-
Спасибо. Слава работает без побочных эффектов Диониса. — Фрейзер Киркман 15 фев, в 17:24
Хотя ответ Диониса работает, есть лучший способ сделать это в более поздних версиях Visual Studio Code.
Перейдите в Файл> Настройки> Настройки
, затем прокрутите вниз и найдите «Эммет», откройте вкладку, и вы должны увидеть следующий текст
//Включение сокращений Emmet на языках, которые не поддерживаются по умолчанию. Добавьте здесь сопоставление между языком и языком, поддерживаемым emmet. //Например: {"vue-html": "html", "javascript": "javascriptreact"} "emmet.includeLanguages": {},
Так что просто следуйте инструкциям и добавьте "emmet.includeLanguages": {"javascript": "javascriptreact"}
в json на правой панели (что перезапишет пользовательские настройки).
1-нажмите F1 (в Visual Код студии)
2-введите «расширение» в появившемся текстовом поле
3-выберите «Расширения: установить расширение»
3-введите «ext install jsx»
4- установите JS JSX-фрагменты
5-перезапустите код Visual Studio

1-нажмите F1 (в Visual Studio Code)
2-введите «расширение» в появившемся текстовое поле
3-Pick «Extensions: Install Extension»
3-Type «ext install jsx»
4- установить JS Фрагменты JSX
5-перезапуск кода Visual Studio
Просто установите расширение:
- Нажмите F1 (в Visual Studio Code)
- Введите «extension» «в появившемся текстовом поле.
- Выберите» Расширения: Установить расширение «
- Введите» ext install jsx «
- Перезапустить код Visual Studio
Источник:
https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsxhttps:// marketplace.visualstudio.com/items/TwentyChung.jsx

-
1Работает ли это для файлов * .js? Я попытался установить это, и, похоже, это не помогает с ошибками в стиле xml. — sethreidnz 10 дек. ’15 в 1:18
-
2Это расширение выглядит как оболочка для файла TextMate JSX.tmLanguage. Как уже указывал человек, разместивший вопрос, VSCode уже поддерживает выделение JSX, им просто нужно сделать это в файле JS, а не только в JSX. Поэтому установка этого расширения может быть бесполезной.. — djabraham 12 дек. ’15 в 06:54
-
Да, это расширение на самом деле ничего не делает, насколько я могу судить. Также я не могу понять, как связаться с парнем, который это сделал. Я бы хотел использовать vsCode для моего реагирующего разработчика (веб-шторм — отстой в сравнении, IMO) … У кого-нибудь еще есть хорошие идеи? — sethreidnz 15 дек. ’15 в 19:49
Просто установите расширение:
- Нажмите F1 (в Visual Studio Code)
- Введите «extension» в появившемся текстовом поле.
- Выберите «Extensions: Install Extension»
- Введите «ext install jsx»
- Перезапустить код Visual Studio
Источник:
https://code.visualstudio.com/docs/editor/extension -gallery? pub = TwentyChung & ext = jsxhttps://marketplace.visualstudio.com/items/TwentyChung.jsx
Попробуйте использовать ссылку на Mac или Linux.
ln -s index.ios.js index.ios. jsx
Попробуйте использовать ссылку на Mac или Linux.
ln -s index.ios .js index.ios.jsx