/ vscode-react-native

Стабильный:

Предварительный просмотр:

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, выполните следующие действия:

  1. Откройте свой проект в VS Code с установленным расширением.

  2. Создайте конфигурацию отладки (как описано в разделе «Отладка приложений React Native»), выберите Отладка в экспоненте в раскрывающемся меню отладки и запустите отладка

  3. Подождите, пока s Некоторые зависимости настроены — расширение установит Expo Development Library (@ expo/xdl) , когда эта функция используется в первый раз.

  4. Если вы раньше не использовали Exponent в этой системе, вам будет предложено ввести имя пользователя и пароль Exponent. Учетная запись Exponent позволяет использовать облачные сервисы Expo. Более подробную информацию о том, как это работает, можно найти здесь. Если вы не создали учетную запись Exponent, то при указании нового имени пользователя и пароля она будет создана. Обратите внимание, что с учетной записью не связана никакая электронная почта и нет способа восстановить забытые пароль. Если вы не хотите создавать учетную запись Exponent, вы можете указать параметр expoHostType в своей конфигурации отладки, чтобы Expo работал локально (через локальную сеть или на localhost).

  5. После запуска упаковщика расширение откроет отдельную вкладку с QR-кодом для сканирования из приложения Exponent. Как только вы это сделаете, приложение Exponent подключится к упаковщику и запустит ваше приложение.

  6. После загрузки и запуска приложения откройте меню разработчика и включите удаленную отладку, нажав кнопку Удаленная отладка 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

  1. Добавьте конфигурацию Attach to packager в .vscode/launch. json в вашем проекте

     {"name": "Присоединить к упаковщику", "cwd": "$ {workspaceFolder}", "type": "reactnative  "," request ":" attach "} 

  2. ( Необязательно ) Запустите Metro packager с помощью команду React Native: Start Packager Command Palette или запустите команду npx react-native start в терминале в корневой папке проекта

  3. Выберите конфигурацию Присоединиться к упаковщику и нажмите кнопку play . Если упаковщик Metro еще не запущен, расширение запустит его автоматически.

  4. Запустите приложение 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 = , , , , код>. Если значение равно simulator , тогда окно быстрого выбора будет расширено именами доступных виртуальных устройств, тогда целевым значением в launch.json будет изменено на имя выбранного виртуального устройства. Если у вас есть только одно виртуальное устройство, оно будет выбрано автоматически. 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 для связи с устройством или эмулятором. Возможные значения:
  • tunnel — позволяет развернуть и отладить приложение с помощью облачных сервисов Expo.
  • lan — позволяет развернуть и установить приложение через вашу локальную сеть.
  • local — позволяет отлаживать приложение на эмуляторе или устройстве Android без сетевое соединение
строка туннель
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: запускать экспоненту
  • Консоль отладки, которая используется для получения журналов приложений и журналов, созданных адаптером отладки ( 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, вам необходимо изменить сервер отладки:

  1. CTRL + M ( CMD + M ) в эмуляторе.
  2. Перейдите в Настройки разработчика
  3. Хост сервера отладки для устройства => введите localhost: .
  4. Перезагрузите приложение (дважды нажмите R )
  5. (только 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:

  1. Поскольку LogCat Monitor запускается для всех сценариев запуска Android по умолчанию, вы можете добавить logCatArguments в свой сценарий отладки в файле launch.json , как в следующем примере:
 {"name": "Debug Android", "cwd  ":" $ {workspaceFolder} "," type ":" reactnative "," request ":" launch "," platform ":" android "," logCatArguments ": [" ReactNativeJS: V "]} 

  1. Если вы хотите запустить 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:

  1. Откройте палитру команд и выполните следующую команду

      Удаленные контейнеры: добавить файлы конфигурации контейнера разработки ...  

    Затем выберите Существующий файл Dockerfile для создания файла конфигурации .devcontainer/devcontainer.json .

  2. Создать файл Docker, расширяющий образ responsenativecommunity/response-native-android . Например, вы можете использовать следующий файл Docker:

      FROM responsenativecommunity/response-native-android: latestRUN npm install -g expo-cli react-native-cli  
  3. Настройте файл 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"]} 

  4. Откройте палитру команд и выполните следующую команду Удаленные контейнеры: откройте папку в контейнере , чтобы повторно открыть ваш проект в контейнере

  5. Подключите устройство через 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.


7

Я мог бы сделать это, но «не файлы React JS» также отображаются в режиме JavaScriptReact.

  1. открыть файл C: Program Files (x86) Microsoft VS Code resources app plugins vs.language.javascript syntaxes javascriptreact.json (возможно, нужно открыть w с правами администратора.)
  2. замените «jsx» на «js» в массиве «fileTypes».
  3. перезапустите приложение, закройте открытые файлы js и снова откройте.
Улучшить этот ответ
отредактировал 02 октября 2015 в 17:42
ответил 02 окт. 2015 в 1:48
  • 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.

  1. открыть файл C: Program Files (x86) Microsoft VS Code resources app plugins vs.language.javascript syntaxes javascriptreact.json (возможно, нужно открыть с правами администратора)
  2. замените «jsx» на «js» в массиве «fileTypes».
  3. перезапустите приложение, закройте открытые файлы js и снова откройте.

6

Я считаю, что приведенный ниже самый простой способ форматирования код

Щелкните в правом нижнем углу редактора кода VS, где написано Javascript.

Вы увидите параметр для выбора языкового режима, здесь вы можете выполнить поиск JavaScriptReact и выберите. Вот и все. Это должно решить вашу проблему.

1.

Улучшите этот ответ
ответил 24 апр. ’19 в 14:04
  • 1
    Этот вопрос возник в то время, когда эта опция еще не существовала. Прямо сейчас это так просто, как вы сказали. — Уильям Грейсель, 15 августа ’19, 20:26
  • Почему я не вижу этого в нижней части редактора vs? У меня установлено последнее обновление vs community и последняя версия react. и все расширения обновлены. Вместо этого я вижу строку, показывающую одну ошибку компиляции, и стрелку влево/вправо, чтобы просмотреть ошибки, и строку github «добавить в систему управления версиями» синим цветом. — Эндрю Х, 14 июня ’20 в 20:01
  • Отлично работает, спасибо — JeffinJ 31 авг., 11:12
добавить комментарий |

Мне кажется, что это самый простой способ форматирования кода.

Щелкните в правом нижнем углу на Редактор кода VS, где написано «Javascript».

Вы увидите вариант выбора языкового режима, здесь вы можете найти JavaScriptReact и выбрать. Вот и все. Это должно решить вашу проблему.

1.


5

Мне потребовалось некоторое время чтобы понять это, но — JSX уже является частью Emmet — который является частью VS Code. Я сказал Эммету также (дополнительно) сделать фрагменты JSX доступными в обычных файлах JS.

Просто вставьте это в вашем файле настроек:

  "emmet.syntaxProfiles": {"javascript": "jsx"}  

Улучшить этот ответ
ответил 03 октября 2016 в 15:58
добавить комментарий |

Мне потребовалось время, чтобы понять это но — JSX уже является частью Emmet, который является частью VS Code. Я сказал Эммету также (дополнительно) сделать фрагменты JSX доступными в обычном JS-файлы.

Просто поместите это в свой файл настроек:

  "emmet.syntaxProfiles": {"javascript": "jsx"}  

3

Теперь есть Расширение VS Code, которое позволяет обрабатывать файлы .js как файлы .jsx .

К сожалению, файл readme для расширения также предупреждает:

при установке этого расширения вы потеряете всю существующую языковую поддержку, предусмотренную для файлов .js

К счастью, VS Code сейчас очень близка к принятию Salsa, а это значит, что скоро проблема js-is-jsx должна быть полностью решена.

Улучшите этот ответ
отредактировано 12 января 2016 г. в 16:31
ответил 08 янв. в 18:43
  • 2
    Ссылка 500 и плагин больше не доступны — Энди Рэй, 22 мая 2016 г., 1:04
добавить комментарий |

Теперь существует расширение VS Code, которое позволяет обрабатывать файлы .js как .jsx файлы.

К сожалению, в файле readme для расширения также предупреждается:

при установке этого расширения вы потеряете вся существующая языковая поддержка предусмотрена для файлов .js

К счастью, VS Code сейчас очень близок к принятию Salsa, что означает, что вскоре проблема js-is-jsx должна быть полностью решена.


3

Хотя ответ Диониса работает, есть лучший способ сделать это в более поздних версиях Visual Studio Code.

Перейдите в File> Prefrences> Settings , а затем прокрутите вниз и найдите «Emmet» открытым на вкладке, и вы должны увидеть следующий текст

 //Включите сокращения Emmet на языках, которые не поддерживаются по умолчанию.  Добавьте здесь сопоставление между языком и языком, поддерживаемым emmet. //Например: {"vue-html": "html", "javascript": "javascriptreact"} "emmet.includeLanguages": {},  

Так что просто следуйте инструкциям и добавьте "emmet.includeLanguages": {"javascript": "javascriptreact"} в json на правой панели (который перезапишет пользовательские настройки).

Улучшить этот ответ
ответ дан 4 августа 2018 в 7:08
  • Спасибо. Слава работает без побочных эффектов Диониса. — Фрейзер Киркман 15 фев, в 17:24
добавить комментарий |

Хотя ответ Диониса работает, есть лучший способ сделать это в более поздних версиях Visual Studio Code.

Перейдите в Файл> Настройки> Настройки , затем прокрутите вниз и найдите «Эммет», откройте вкладку, и вы должны увидеть следующий текст

 //Включение сокращений Emmet на языках, которые не поддерживаются по умолчанию.  Добавьте здесь сопоставление между языком и языком, поддерживаемым emmet. //Например: {"vue-html": "html", "javascript": "javascriptreact"} "emmet.includeLanguages": {},  

Так что просто следуйте инструкциям и добавьте "emmet.includeLanguages": {"javascript": "javascriptreact"} в json на правой панели (что перезапишет пользовательские настройки).


0

1-нажмите F1 (в Visual Код студии)

2-введите «расширение» в появившемся текстовом поле

3-выберите «Расширения: установить расширение»

3-введите «ext install jsx»

4- установите JS JSX-фрагменты

5-перезапустите код Visual Studio

Улучшите этот ответ
отредактировано 23 авг. в 6:03
Аргья Садху
25.4k99 золотых знаков3232 серебряных знака5353 бронзовых знака
ответил 23 авг. 58
добавить комментарий |

1-нажмите F1 (в Visual Studio Code)

2-введите «расширение» в появившемся текстовое поле

3-Pick «Extensions: Install Extension»

3-Type «ext install jsx»

4- установить JS Фрагменты JSX

5-перезапуск кода Visual Studio


-2

Просто установите расширение:

  • Нажмите 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

Улучшить этот ответ
ответил 01 декабря 2015, 20:30
  • 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


-6

Попробуйте использовать ссылку на Mac или Linux.

  ln -s index.ios.js index.ios.  jsx  

Улучшите этот ответ
21 нояб. в 14:43
добавить комментарий |

Попробуйте использовать ссылку на Mac или Linux.

  ln -s index.ios  .js index.ios.jsx  

Оцените статью
logicle.ru
Добавить комментарий