Как запустить чужой файл через react native

Используйте React-Native в существующем проекте приложения

Исходный адрес

Для большинства разработчиков React-Native опасен, поэтому это приемлемое и более безопасное решение для использования его в небольших масштабах в существующих проектах. Это также вопрос о том, что перевел этот документ.

Старые проекты, которые не используют Reactive Native, легко присоединиться к React Native, просто используйте CocoaPods. Отчасти это связано с тем, что React Native хочет делать V только в MVC и не имеет никаких предположений относительно других технологических стеков, которые вы уже используете .

Зависимое программное обеспечение

Использование CocoaPods gem install cocoapods установка
io.js
- согласно сдокумент по установке nvmУстановите nvm. После запуска:
  nvm install iojs-v2 && nvm alias default iojs-v2 Установите последнюю версию, совместимую с io.js, и настройте свой терминал так, чтобы io.js запускался при входе в узел. Используйте nvm для установки нескольких версий Node и io.js и легко переключайтесь между версиями.
Установите React Native с помощью CocoaPods

CocoaPods — это инструмент управления пакетами, обычно используемый при разработке для iOS / Mac. Необходимо загрузить и установить React Native. Если вы не установили CocoaPods, см.Этот учебник

После получения CocoaPods добавьте следующий контент в файл Podfile (если файл Podfile отсутствует, создайте его в корневом каталоге проекта).

Добавьте подспецификации, которые хотите использовать в своем проекте

Не забудьте установить нужные вам подспецификации, если не добавить React/RCTText , Невозможно использовать элемент <Text>.
, затем установите модули.
$ pod install

Создайте свое приложение React Native

Приложение React Native разделено на две части:
1. Файл Javascript: Содержит ваш реальный React NativeApp и другие компоненты.
2. Пакет Objective-C: Загрузка файлов сценариев, отображение компонентов React Native и управление ими.
  Первый шаг — создать каталог для кода React приложения и создать index.ios.js.
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js

Скопируйте приведенный ниже код и вставьте его в index.ios.js — это скелет приложения React Native.

SimpleAppИмя модуля, которое будет использоваться позже.

Добавьте представление контейнера в свое приложение

Используйте View как контейнер React Native, если он является подклассом UIView.

Чтобы очистить код, создайте подкласс UIView ReactView.

При управлении этим контроллером представления добавьте это представление.

Для простоты AutoLayout отключен.В реальном проекте вы должны открыть AutoLayout и установить ограничения.

Добавить RCTRootView в контейнер View

Ниже будет самое интересное, мы создадим RCTRootView, где живет приложение React Native.

В ReactView.m нам сначала нужно использовать ваш URI index.ios.bundle для инициализации вашего RCTRootView Index.ios.bundle будет создан упаковщиком React Native и предоставлен сервером.

Затем добавьте его как подвид ReactView

Запустить сервер разработки

В корневом каталоге запустите сервер разработки React Native.

Эта команда запустит сервер разработки React Native и скомпилирует наш скрипт. —root Параметр указывает корень приложения React Native, то есть каталог, содержащий файл index.ios.js.

Работающий сервер будет упакованindex.ios.bundleФайл черезhttp://localhost:8081/index.ios.bundle.Доступен.

Скомпилировать и запустить

Теперь скомпилируйте и запустите ваше приложение, вы увидите, что ваш React Native работает внутри ReactView.

Его также можно загрузить в реальном времени из симулятора! У вас есть простой компонент React, полностью инкапсулированный в подклассе Objective-C UIView.

подводить итоги

В этом случае, когда RCTRootView При инициализации он попытается загрузить, проанализировать и запустить файл сценария. Это означает, что вам нужно только реализовать RCTRootView Представление контейнера или контроллер. RCTRootView Отвечает за рендеринг ваших компонентов React.

How to open an external app from react native app?

Is it possible to open an external app when touching a button from my react native app? Specifically, i want to open Whatsapp when I touch a button. How can I do this?

7 Answers 7

Previously below was used,

But later the URL is changed as follows, we can also add phone and text query params shown below,

You can try to use parameters from the API of the application. For example in my case I had to open maps on IOS and start a navigation from Point A to B. So I checked the documentation from HERE, and used the navigation link: «http://maps.apple.com/?saddr=Cupertino&daddr=San+Francisco» to create the query to open the app:

You can use coordinates too, as lat and long :

i wanted to open whatsapp on a click of simple button in my react-native application, which i am developing for android.

I have searched a lot about this but did not got any perfect solution. Although i found one third party library «npm i -S react-native-app-link».

The description in this library is exactly what i wanted to do. But not able to figure it out. If any of you can help it out it will be a great favor for me.

как запустить существующий проект React Native

3) зашел в рабочую папку и открыл учебный проект в папке cmd.

4) затем ввожу react-native run-android и получить фиаско

Я начал гуглить и нашел что-то, связанное с некоторыми зависимостями. Использование react-native init MyProject

5) react-native init tutorialProject и более узкая правая линия

Пытаюсь запустить сервер через npm и тут смешно . 6) npm-intall

А вот я совершенно не знаю. Как запустить чужой проект?

8 ответов

Возможный ответ: NPM, не может найти ‘graceful-fs’ , что бы я ни делал у него была такая же проблема с ошибкой: не удается найти модуль ‘graceful-fs’
1. npm cache clean —force
2. npm i или npm install
При загрузке после установки всего пакета в package.json

Тогда вам нужно запустить другой терминал

Это для запуска вашего сборщика

Наконец, вы можете запустить свой проект

С компьютера с установленным узлом вы переходите из командной строки в корень папки проекта.

Затем вы устанавливаете зависимости:

Это устанавливает все библиотеки, необходимые для создания проекта.

Затем вы запускаете сценарий сборки проекта. Это определено в файле проектов package.json. В этом случае сценарий называется запуском. Так:

Все зависимости и плагины настроены в файле package.json . поэтому вам необходимо установить:

Тогда вы можете начать

Если у вас уже есть пакетное приложение (android или ios . )

Иначе ты должен бежать

А затем запустите:

Это ответ при компиляции в windows и android studio

1. Откройте cmd (как администратор) 2. Установка Npm 3. Подождите, пока сборка gradle в Android Studio завершится, компиляция 4. Запустите cmd, реагируйте на родной android-run

Иногда вы можете получить эту ошибку (см. Изображение ниже)

Это не удалось построить из-за ошибки градиента. Чтобы решить эту проблему, вы можете попытаться удалить файлы / папку в сообщении об ошибке и снова запустить response-native android-run.

Установка Chocolatey Chocolatey — популярный менеджер пакетов для Windows. Итак, сначала нам нужно установить его в нашей системе.

Чтобы установить Chocolaty, откройте Командную строку с правами администратора и выполните приведенную ниже команду.

Создаем мобильное приложение на React Native. Часть 1: Настройка окружения

Создаем собственную программу для iOS и Android на базе React Native. Используем веб-технологии, чтобы быстро писать полноценный кроссплатформенный код. Краткое руководство по основным аспектам языка и созданию готового приложения для iPhone, которое можно легко конвертировать в ПО для Андроид-смартфона и без особых усилий перенести в браузер.

Что будем делать и как?

В рамках небольшого гайда сделать что-то комплексное не получится. Будем делать максимально простенькое приложение, но постараемся задействовать системные компоненты смартфона, разберемся в том, как работает React Native, а также поговорим про сторонние API и сложности, связанные с созданием мобильных программ.

Поэтому неплохим решением мне показалось начать разработку программы, которая показывает погоду в реальном времени и позволяет посмотреть прогноз на ближайшие несколько дней. Этого хватит, чтобы получить представление о том, как создавать что-то при помощи React Native.

Почему React Native?

Это универсальная платформа, для изучения которой нужно меньше всего ресурсов, если речь идет о переход с веба в мобильную среду. У React Native куча недостатков, и зачастую разработчики рекомендуют использовать нативный код или фреймворки по типу Flutter, но надо иметь в виду, что во многом качество итогового результата зависит больше от навыков разработчика, чем от выбранных технологий.

При помощи React Native было создано немало удобных, производительных и визуально привлекательных приложений. Взгляните на тот же Discord – его вообще трудно отличить от нативной программы, ведь весь интерфейс ощущается плавно, поддерживается Drag & Drop и нигде не выдается использование веб-технологий.

Так что React Native вполне можно считать хорошим выбором для разработки программ как под iOS, так и под Android. Но придется потратить немало времени на оптимизацию и поиск наиболее удачных решений для каждого компонента и каждой функции.

Инструкция по настройке для iOS

Для создания примитивных приложений на базе React Native можно использовать утилиту Expo cli – это отдельное приложение для iOS и Android, содержащее в себе все React-компоненты, встроенные во фреймворк по умолчанию. Проблема в том, что если вы захотите добавить в свой проект какой-то специфичный код или разработать свои компоненты для конкретного приложения, то Expo их поддерживать не сможет. Поэтому мы будем идти более хардкорным путем и настраивать полноценное окружение для создания программы на React Native.

Второй сложный момент, связанный с настройкой под iOS – необходимость в компьютере Apple или хотя бы в Хакинтоше и приложении Xcode. И хотя разработку можно вести хоть в VS Code, хоть в обычном блокноте, для запуска эмулятора и сборки итогового проекта нам все равно будет нужен Xcode, иначе наша программа никогда не увидит свет и мы даже не поймем, работает ли она должным образом.

Загружаем и настраиваем Xcode

Xcode лежит в основе процесса разработки для мобильных платформ Apple. И каким бы он ни был отвратным, придется его скачать. Весит эта туша около 15 Гбайт, так что запаситесь терпением. Найти его можно только в App Store, там же можно почитать негативные отзывы.

После загрузки и установки нужно зайти в раздел с параметрами Xcode и выбрать там вкладку Locations. В ней нужно будет найти выпадающее меню, в котором необходимо указать последнюю доступную версию утилиты Command Line Tools.

Также надо зайти в раздел Components и загрузить из него симулятор с подходящей версией iOS (я выбрал последнюю).

Скачиваем зависимые пакеты

Нам нужно не так уж много зависимостей.

Скачаем менеджер пакетов Brew при помощи команды /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Естественно, необходима node.js. Без нее не получится вести разработку на JavaScript. Устанавливаем ее командой brew install node

А затем по своему желанию добавляем пакет Watchmen. Это инструмент для отслеживания изменений в файловой системе, разработанный Facebook. Корпорация обещает, что Watchmen может заметно ускорить производительность всего проекта на базе React-Native. Если верите им, то можете установить его с помощью brew install watchmen

Следом скачаем CocoaPods. Это менеджер библиотек для Xcode, без которого он нормально не функционирует. Смело вводим команду sudo gem install cocoapods и ждем. Процесс может затянуться, не пугайтесь и не прекращайте его раньше времени.

Создаем React Native проект и запускаем его

После установки зависимостей Facebook рекомендует использовать встроенную утилиту для управления React-Native-приложениями через командную строку. Поэтому для создания нового шаблонного проекта на базе RN введем команду npx react-native init reactNativeWeather. Вы можете выбрать другое название для своего приложения, это не так принципиально. Переходим в директорию со вновь созданным проектом командой cd reactNativeWeather, запускаем его командой npx react-native run-ios

Начнется длительный процесс включения симулятора, сборки приложения и активации бандлера Metro, отвечающего за упаковку проекта в «реальное» iOS-приложение. Все это может занять достаточно много времени, в частности под угрозой пользователи старых моделей компьютеров (как я).

После того как программа запустится в симуляторе, мы можем приступать к разработке.

Исправление ошибок

По ходу базовой настройки я наткнулся на две проблемы. Во-первых, первичная сборка завершилась ошибкой. Почему это произошло, я сказать не могу, но вылечилась проблема за счет повторной сборки проекта, то есть очередного запуска npx react-native run-ios

Со второй ошибкой сложнее, она возникает из-за несовместимости утилиты Create React App и Node.js последней версии. Поэтому, если у вас установлена Node.js версией 16.4 или старше, придется делать откат.

Вводим команду npm install -g n

Затем вводим команду n 16.3.0

Готово. Теперь у вас установлена и используется Node.js более ранней версии.

После этого необходимо заново собрать свой проект и попытаться запустить симулятор. С большой долей вероятности на этот раз ошибка не возникнет.

Инструкция для Android

В случае с Android разработку можно вести на любом устройстве. Независимо от выбранной операционной системы вам понадобятся практически те же пакеты, что и в macOS, логика построения кода тоже мало чем будет отличаться от версии для iOS. Изменится только приложение, в котором будет запущен эмулятор мобильного устройства. Но об этом поговорим позже.

Скачиваем зависимые пакеты

В этом блоке мы будем рассматривать настройку окружения для Windows. Для Linux она почти не отличается. К тому же если вы пользуетесь Linux, то вы, скорее всего, прекрасно знаете, как своими руками установить нужные для разработки компоненты.

Сначала скачиваем менеджер пакетов Chocolatey. Это аналог Brew для Windows. Для этого:

Открываем утилиту PowerShell с правами администратора.

Вводим команду Set-ExecutionPolicy AllSigned или Set-ExecutionPolicy Bypass -Scope Process

После этого вводим команду:

Последняя команда запустит процесс автоматической загрузки и установки Chocolatey.

После этого нам предстоит загрузить Java-среду для разработки приложений и Node.js. Для этого можно воспользоваться командой choco install -y nodejs-lts openjdk11

Загружаем и настраиваем Android Studio

Дальше процесс немного усложняется, поэтому внимательно следуйте инструкциям, чтобы сократить количество потенциальных ошибок и сбоев по ходу настройки к минимуму.

Нам нужна среда для разработки Android Studio. В процессе инсталляции проекта выбираем несколько компонентов:

Android SDK Platform

Android Virtual Device

Еще необходимо загрузить и установить модуль Hyper-V для виртуализации.
По умолчанию при установке Android Studio в вашу систему будет загружен набор инструментов Android SDK последней версии. Но для сборки приложений с React Native-кодом необходима именно 10 версия. Поэтому мы:

Открываем Android Studio.

Переходим в раздел настроек Appearance & Behaviour.

Затем открываем пункт System Settings.

Кликаем по меню Android SDK.

Открываем вкладку SDK Platforms.

Находим пункт Show Package Details и кликаем по нему.

Следом ищем SDK версии Android 10 (Q) и ставим галочку напротив пунктов: Android SDK Platform 29, Intel x86 Atom64 System Image и Google APIs Intel x86 Atom System Image.

Аналогичную процедуру надо проделать, перейдя во вкладку SDK Tools.

Затем нажимаем на кнопку Apply, чтобы сохранить внесенные в IDE изменения.

Настраиваем переменную окружения

Для работы с React Native в Windows необходимо создать глобальную переменную окружения. Чтобы ее сделать:

Открываем «Панель управления».

Переходим в раздел управления пользователями.

Находим там пункт, отвечающий за выставление переменных окружения.

Создаем новую переменную с названием ANDROID_HOME.

Значение по умолчанию нужно заменить на реальное местоположение SDK Android. Его можно посмотреть в настройках Android Studio.

После этого открываем командую строку PowerShell.

Прописываем команду Get-ChildItem -Path Env:\

Затем снова открываем панель управления, заходим в тот же раздел управления пользователями и добавляем еще одну переменную окружения, на этот раз переменную под названием Path. Ее значение по умолчанию – %LOCALAPPDATA%AndroidSdkplatform-tools.

Настраиваем React Native и запускаем приложение в виртуальной среде

Далее процесс настройки вообще не отличается от такового для Айфонов и Айпэдов. Нужно установить консольную утилиту React Native, а затем запустить ее. Каждый шаг установки можно изучить в разделе установки React Native для iOS.

Основное отличие для двух систем – команда запуска. В случае с Android нужно будет вводить npx react-native run-android

Приступаем к разработке

После запуска приложения при помощи команды npx react-native run-ios перед нами появится интерфейс симулятора. В macOS он связан с Xcode, а в Windows, macOS и Linux при разработке под Android – c Android Studio.

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

Теперь можно переходить непосредственно к изменению кода.

Открываем текстовый редактор на свой выбор (я использую VSCode).

Внутри переходим к директорию с проектом reactNativeWeather.

Затем открываем файл App.js и редактируем код так, как нам надо.

Базовые концепции React Native

Несмотря на то, что React Native и React являются близкими родственниками и у них действительно много где совпадает код, нам все равно придется адаптироваться. То есть нельзя просто скопировать тот код, что используется в вебе и в неизменном виде отправить его на мобильные устройства.

Отличий между языками хватает, и одно из ключевых – синтаксис. Как ни странно, он здесь тоже другой.

Мы не будем разбирать всю документацию и каждое отличие между веб-фреймворком и его собратом, заточенным под iOS и Android. Я лишь покажу отличия в базовой верстке и примитивных конструкциях.

Меняем стили

К примеру, вот перед нами шаблонное приложение, логика которого почти полностью описана в одном файле. Попробуем изменить внешний вид кнопок путем редактирования соответствующих стилей.

В случае с React Native стили добавляются к элементам несколько иначе.

Если нужно добавить стиль inline, то мы пишем ключевое слово style в списке атрибутов компонента, затем открываем фигурные скобки, в них открываем еще одни, чтобы создать объект и затем уже прописываем CSS-свойства на базе синтаксиса JavaScript. Для изменения внешних отступов, к примеру, используется свойство margin, но его значение указывается не в пикселях, а во встроенных в React Native значениях.

А чтобы добавить стиль в отдельном файле или блоке, то сначала нужно создать переменную, в которой будет храниться результат работы функции StyleSheet.create(). Уже внутри нее мы прописываем названия классов и к ним добавляем CSS-свойства. Названия классов, кстати, тоже добавляются по-другому. Необходимо внутри атрибута style у компонента создать массив и уже в него добавить название класса.

Некоторые значения указываются в кавычках (текстовые), а некоторые без (числовые). Это нужно запомнить.

Попробуем у существующих компонентов заменить цвет фона на оранжевый, а цвет текста – на белый. Для этого найдем класс, отвечающий за дизайн компонентов с подсказками, а затем изменим его свойства в блоке функции StyleSheet.create().

Единственная сложность, которая у нас возникает по ходу изменения стиля блоков – проверка темы оформления. Но мы можем временно отключить эту проверку и заставить программу всегда выбирать конкретный стиль оформления текста. Для этого уберем булево значение (проверку if с тернарным оператором) и выставим конкретный цвет текста.

Также слегка изменим внешние и внутренние отступы. Как видите, в этом нет чего-то сложного, но логика все же отличается, и это нужно иметь в виду, переходя с React на React Native.

Добавляем логику, компоненты и состояния

Вы уже могли заметить, что в React Native нет привычных HTML-тегов, используемых в веб-приложениях. На их место пришло что-то иное. Это иное – компоненты, превращающие веб-код в код, считываемый мобильными операционными системами. Чтобы наша программа понимала, что это за элементы, мы пытаемся отобразить, в какой плоскости и для чего необходимо использовать теги, задуманные разработчиками React Native, а не те, что мы принесли с собой из веба.

Например, для отображения абстрактного div-элемента придется создавать компонент View и уже внутрь него помещать другие компоненты верстки. А для скроллящегося списка есть вообще отдельный компонент – ScrollView. И контент можно прокручивать только в нем.

Мы попробуем убрать уже существующий код и добавим в наше приложение свой текст и небольшую картинку.

Удаляем существующий код, оставив лишь компоненты SafeAreaView и ScrollView. Первый не позволит нам отправить контент за «челку» устройства, а второй позволит пролистывать контент внутрь (пригодится на будущее).

Добавляем новый view-тег:

Затем внутрь добавляем text-тег. Он необходим, так как просто добавить текстовое содержимое в код для мобильных приложений нельзя. Необходимо создать соответствующее поле.

Аналогично поступаем и с картинкой. Чтобы добавить в React-Native отдельное изображение, надо создавать соответствующий компонент. Но он в нашем коде отсутствует. Сначала надо импортировать компонент Image в нашу программу.

А после можно добавить компонент Image в наш View рядом с текстом:

Чтобы указать источник изображения, нужно добавить к тегу Image соответствующий атрибут. В React Native это атрибут source, и он используется вкупе с ключевым словом require.

Затем вернемся к нашему View и зададим для него свойство Flex, чтобы центрировать добавленные в приложение элементы верстки. Также мы используем свойство alignItems вместо justifyContent, потому что направление элементов в мобильных ОС по умолчанию сверху вниз, а не слева направо.

Готово. Мы добавили в компонент собственный контент и заставили его отобразиться в полноценном мобильном приложении. Да, пока что это примитивный Hello World, но это первый шаг на пути к полноценному погодному приложению.

Вместо заключения

Процесс настройки и базового знакомства с React Native немного затянулся, но без этого перейти к созданию мобильного приложения просто невозможно. Нам нужен какой-то каркас и полноценная рабочая среда, чтобы реализовать свои идеи на настоящем телефоне/планшете.

Дальше мы поговорим о том, как получить геолокационные данные, как создавать собственные компоненты, кнопки, также будем общаться сразу с двумя видами API. А пока достаточно каркаса с котиком и одной строки текста.

Если по ходу настройки или разработки возникнут какие-то сложности, сообщайте о них в комментариях, постараюсь разобраться в проблеме. Советы и замечания тоже приветствуются.

How to Share Code Between React Web and React Native Apps

Introduction
When we build a web app and mobile app using React and React Native (RN), there can be a lot of common functionality between mobile and web. For example, GraphQL queries, state management using Redux, and utility functions.

When we want to change in this functionality, we have to then do it in both our apps. By default, React and React Native don’t allow you to import code from outside the root directory.

In order to do this, we have to configure a few things:
- In the web app, we can import code from outside the root directory by performing a few changes in our Webpack files.
- In the mobile app, we have to modify the metro bundler config.
Before moving ahead with this tutorial, you’ll need to install the following on your development machine:

System Requirements
Node ≥ 8.10 and npm ≥ 5.6
Android Studio
Xcode(for mac)

Now let’s jump to an example implementation.

Directory Structure

1. Create a new project directory

2. Create a new react web app inside the my-app directory

3. Create a new react native app inside the my-app directory

4. Create a new directory for common code inside the my-app directory

The directory structure should now look like this.

Run web app

Run mobile app

When you run the mobile app, Metro bundler looks for JS files only in the mobileApp directory. We also want to load JS files from outside the mobileApp directory i.e from the common directory

Now create a new JS file named sum.js in common directory

Let’s import this function getSum in mobileApp/App.js file

When you try to import anything from outside mobileApp directory, bundler will throw an error: Unable to resolve module

Let’s add our common directory to the metro config on the watch list.

Now, re-build our react native app.

Metro bundler will also look for JS files in the common directory. Now you can import any file from a common directory e.g Redux code, GraphQL queries, utility functions.

Let’s try to use the same getSum method in our Web App

When you try to import anything outside of src directory, the web app fails to compile.

There are multiple ways to fix this error.

1. Don’t use the create-react-app package to create your web app in the first place.
2. If you already have a web app created using create-react-app, you can eject it (more on that later)
3. You can use the react-app-rewired npm package to override the existing configuration.

We already created our app using create-react-app. Let’s eject

When you eject your app, you will see a few extra files and some file changes.

Now we can remove ModuleScopePlugin, which is stopping us from importing files from outside src directory.
Remove ModuleScopePlugin from config/webpack.config.js file.

Start our web app again.

Voila, look at that — you’re now sharing code between your React native web and mobile apps! Write once, deploy everywhere ��

Как запустить чужой проект?

Добрый день . хотел скачать и запустить чужой проект, чтобы рассмотреть его функции. но столкнулся с рядом проблем . что он не изволяет запускаться , и просто не знаю что делать, помогите пожалуйста
___
КЛац

1) в рабочую папку скопировал tutorialProject
2) открыл VS code
3) зашел в рабочую папку и нажал открыть в cmd папку tutorialProject
4) далее я ввожу react-native run-android
и получаю фиаско

d:\JS\tutorialProject>react-native init tutorialProject
internal/modules/cjs/loader.js:657
throw err;
^

Error: Cannot find module ‘graceful-fs’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
at Function.Module._load (internal/modules/cjs/loader.js:580:25)
at Module.require (internal/modules/cjs/loader.js:711:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (d:\JS\tutorialProject\node_modules\react-native\local-cli\cli.js:12:1)
at Module._compile (internal/modules/cjs/loader.js:805:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
at Module.load (internal/modules/cjs/loader.js:672:32)
at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
at Function.Module._load (internal/modules/cjs/loader.js:604:3)

начал гуглить и нашел что надо сделать какието зависимости . посредством «react-native init MyProject»
5) react-native init tutorialProject
и получаю туже самую строчку .
пытаюсь через npm сервер запустить и тут прикол .
6) npm intall

d:\JS\tutorialProject>npm install
npm WARN deprecated core-js@1.2.7: core-js@<2.6.5 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated connect@2.30.2: connect 2.x series is deprecated
npm ERR! path d:\JS\tutorialProject\node_modules\.bin\react-native
npm ERR! code EEXIST
npm ERR! Refusing to delete d:\JS\tutorialProject\node_modules\.bin\react-native: is outside d:\JS\tutorialProject\node_modules\react-native and not a link
npm ERR! File exists: d:\JS\tutorialProject\node_modules\.bin\react-native
npm ERR! Move it away, and try again.

How to open an external app from react native app?

Is it possible to open an external app when touching a button from my react native app? Specifically, i want to open Whatsapp when I touch a button. How can I do this?

7 Answers 7

Previously below was used,

But later the URL is changed as follows, we can also add phone and text query params shown below,

You can try to use parameters from the API of the application. For example in my case I had to open maps on IOS and start a navigation from Point A to B. So I checked the documentation from HERE, and used the navigation link: «http://maps.apple.com/?saddr=Cupertino&daddr=San+Francisco» to create the query to open the app:

You can use coordinates too, as lat and long :

i wanted to open whatsapp on a click of simple button in my react-native application, which i am developing for android.

I have searched a lot about this but did not got any perfect solution. Although i found one third party library «npm i -S react-native-app-link».

The description in this library is exactly what i wanted to do. But not able to figure it out. If any of you can help it out it will be a great favor for me.
Похожие публикации: