Очень грубый набросок мобильного веб-браузера, созданного с помощью react-native («омнибар» и WebView ). Браузер взаимодействует с API-интерфейсом шлюза (который я, возможно, в конечном итоге также выложу на GitHub), который действует как транспорт для (в настоящее время не поддерживаемых) децентрализованных протоколов ( DAT , в настоящее время).
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )Этот проект был запущен с помощью приложения Create React Native.
Ниже вы найдете информацию о выполнении типичных задач. Самая последняя версия этого руководства доступна здесь.
Вам нужно обновлять глобальную установку create-react-native-app очень редко, в идеале — никогда.
Обновление зависимости вашего приложения от react-native-scripts должно быть таким же простым, как изменение номера версии в package.json и переустановка зависимостей вашего проекта.
Обновление до новой версии React Native требует обновления версий пакетов react-native , react и expo , а также установки правильного sdkVersion в app.json . Актуальную информацию о совместимости версий пакета см. в руководстве по управлению версиями.
Если Yarn был установлен при инициализации проекта, то зависимости будут установлены через Yarn, и вам, вероятно, следует использовать его и для запуска этих команд. В отличие от установки зависимостей, на момент написания этой статьи синтаксис запуска команд для Yarn и NPM идентичен.
npm startЗапускает ваше приложение в режиме разработки.
Откройте его в приложении Expo на своем телефоне, чтобы просмотреть. Он перезагрузится, если вы сохраните изменения в своих файлах, и вы увидите ошибки сборки и журналы в терминале.
Иногда вам может потребоваться сбросить или очистить кеш упаковщика React Native. Для этого вы можете передать флаг --reset-cache в стартовый скрипт:
npm start --reset-cache
# or
yarn start --reset-cache
npm testЗапускает программу Jest Test Runner для ваших тестов.
npm run ios Как и npm start , но также пытается открыть ваше приложение в симуляторе iOS, если вы используете Mac и оно установлено.
npm run android Как и npm start , но также пытается открыть ваше приложение на подключенном устройстве Android или в эмуляторе. Требуется установка инструментов сборки Android (подробную настройку см. в документации React Native). Мы также рекомендуем установить Genymotion в качестве эмулятора Android. После того, как вы завершили настройку собственной среды сборки, есть два варианта сделать правильную копию adb доступной для создания приложения React Native:
adb Android StudioSettings -> ADB . Выберите «Использовать пользовательские инструменты Android SDK» и обновите каталог Android SDK. adb Genymotion/Applications/Genymotion.app/Contents/MacOS/tools/ .npm run ejectЭто запустит процесс «извлечения» из сценариев сборки приложения Create React Native. Вам зададут пару вопросов о том, как вы хотите построить свой проект.
Предупреждение: запуск eject — это постоянное действие (независимо от того, какую систему контроля версий вы используете). Для извлеченного приложения потребуется настроить среду Xcode и/или Android Studio.
Вы можете отредактировать app.json , включив ключи конфигурации в ключ expo .
Чтобы изменить отображаемое имя вашего приложения, установите для ключа expo.name в app.json соответствующую строку.
Чтобы установить значок приложения, установите для ключа expo.icon в app.json локальный путь или URL-адрес. Рекомендуется использовать PNG-файл размером 512x512 с прозрачностью.
Этот проект настроен на использование jest для тестов. Вы можете настроить любую стратегию тестирования, которая вам нравится, но jest работает «из коробки». Создайте тестовые файлы в каталогах с именем __tests__ или с расширением .test чтобы файлы загружались с помощью jest. Пример теста см. в проекте шаблона. Документация jest также является прекрасным ресурсом, как и руководство по тестированию React Native.
Вы можете настроить некоторые параметры поведения приложения Create React Native, используя переменные среды.
При запуске проекта вы увидите что-то вроде этого для URL-адреса вашего проекта:
exp://192.168.0.2:19000
«Манифест» по этому URL-адресу сообщает приложению Expo, как получить и загрузить пакет JavaScript вашего приложения, поэтому даже если вы загрузите его в приложение через URL-адрес, например exp://localhost:19000 , клиентское приложение Expo все равно попытается получите свое приложение по IP-адресу, предоставленному стартовым сценарием.
В некоторых случаях это далеко не идеально. Это может быть тот случай, если вам нужно запустить проект на виртуальной машине и вам нужно получить доступ к упаковщику через IP-адрес, отличный от того, который печатается по умолчанию. Чтобы переопределить IP-адрес или имя хоста, обнаруженные с помощью Create React Native App, вы можете указать свое собственное имя хоста через переменную среды REACT_NATIVE_PACKAGER_HOSTNAME :
Мак и Линукс:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Окна:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
В приведенном выше примере сервер разработки будет прослушивать exp://my-custom-ip-address-or-hostname:19000 .
Приложение Create React Native проделывает большую работу, чтобы сделать настройку и разработку приложений простыми и понятными, но очень сложно сделать то же самое для развертывания в Apple App Store или Google Play Store, не полагаясь на размещенную службу.
Expo предоставляет бесплатный хостинг для приложений только на JS, созданных CRNA, что позволяет вам делиться своим приложением через клиентское приложение Expo. Для этого требуется регистрация учетной записи Expo.
Установите инструмент командной строки exp и запустите команду публикации:
$ npm i -g exp
$ exp publish
Вы также можете использовать такой сервис, как автономные сборки Expo, если хотите получить IPA/APK для распространения без необходимости самостоятельно создавать собственный код.
Если вы хотите создать и развернуть свое приложение самостоятельно, вам нужно будет извлечь его из CRNA и использовать Xcode и Android Studio.
Обычно это так же просто, как запустить npm run eject в вашем проекте, который проведет вас через весь процесс. Обязательно установите react-native-cli и следуйте руководству по началу работы с собственным кодом для React Native.
Если вы использовали API Expo во время работы над своим проектом, то эти вызовы API перестанут работать, если вы перейдете в обычный проект React Native. Если вы хотите продолжать использовать эти API, вы можете использовать «React Native + ExpoKit», который по-прежнему позволит вам создавать собственный собственный код и продолжать использовать API Expo. Более подробную информацию об этой опции см. в руководстве по извлечению.
Если вы не можете загрузить приложение на телефон из-за тайм-аута сети или отказа в соединении, первым делом следует убедиться, что ваш телефон и компьютер находятся в одной сети и могут связаться друг с другом. Приложению Create React Native требуется доступ к портам 19000 и 19001, поэтому убедитесь, что настройки вашей сети и брандмауэра разрешают доступ с вашего устройства к вашему компьютеру через оба этих порта.
Попробуйте открыть веб-браузер на своем телефоне и открыть URL-адрес, который печатает сценарий упаковщика, заменив exp:// на http:// . Так, например, если под QR-кодом вашего терминала вы видите:
exp://192.168.0.1:19000
Попробуйте открыть Safari или Chrome на своем телефоне и загрузить
http://192.168.0.1:19000
и
http://192.168.0.1:19001
Если это работает, но вы по-прежнему не можете загрузить свое приложение, отсканировав QR-код, откройте проблему в репозитории Create React Native App с подробной информацией об этих шагах и любых других сообщениях об ошибках, которые вы могли получить.
Если вы не можете загрузить URL-адрес http в веб-браузере вашего телефона, попробуйте использовать функцию модема/мобильной точки доступа на вашем телефоне (однако остерегайтесь использования данных), подключив свой компьютер к этой сети Wi-Fi и перезапустив упаковщик. Если вы используете VPN, возможно, вам придется отключить его.
Если вы используете Mac, пользователи иногда видят несколько ошибок при попытке npm run ios :
Есть несколько шагов, которые вы можете предпринять для устранения подобных ошибок:
Command Line Tools установлено какое-то значение. Иногда, когда инструменты CLI впервые устанавливаются Homebrew, этот параметр остается пустым, что может помешать утилитам Apple найти симулятор. После этого обязательно перезапустите npm/yarn run ios .Reset Contents and Settings... . После завершения выйдите из симулятора и повторно запустите npm/yarn run ios .Если вы не можете отсканировать QR-код, убедитесь, что камера вашего телефона сфокусирована правильно, а также убедитесь, что контраст двух цветов на вашем терминале достаточно высок. Например, темы WebStorm по умолчанию могут не иметь достаточного контраста для сканирования QR-кодов терминала с помощью системных сканеров штрих-кодов, которые использует приложение Expo.
Если это вызывает у вас проблемы, вы можете попробовать изменить цветовую тему вашего терминала, чтобы сделать ее более контрастной, или запустить Create React Native App с другого терминала. Вы также можете вручную ввести URL-адрес, напечатанный сценарием упаковщика, в строке поиска приложения Expo, чтобы загрузить его вручную.
