create react native app redux auth
1.0.0
Это шаблон для создания реакции-приложений со встроенной навигацией Redux & Local Auth & React.
create-react-native-app-redux-auth генерирует все основополагающие файлы для нового нативного приложения React с подключенным Redux (для управления состоянием) плюс навигация React и локальная аутентификация полностью сделана!
Вы можете работать со всеми компонентами и API в Native Native, а также с большинством API JavaScript, которые предоставляет приложение Expo.
create-react-native-app-redux-auth !Полный письменный учебник можно найти здесь.
Этот проект был загружен с приложением Create React Native и FSG.
Убедитесь, что у вас установлен Node v6 или более поздней версии, а также текущая версия Expo Client 2.5.0 на вашем мобильном устройстве, чтобы поддержать React Native 0.55. Установка XCODE или Android Studio не требуется.
$ npm install -g create-react-native-app-redux-auth Командный инструмент create-react-native-app-redux-auth может использоваться несколькими различными способами.
$ create-react-native-app-redux-auth Просто запуск create-react-native-app-redux-auth в каталоге создает generated подраздел, содержащий ваши новые файлы приложений.
В качестве альтернативы, create-react-native-app-redux-auth может пройти путь к файлу (относительный или абсолютный, и даже тот, который еще не существует), и он будет использовать/создавать папку назначения и заполнить ее своими новыми файлами приложений.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer Если вы уже сделали и cd 'D в каталог и хотите заполнить его новыми файлами приложений, просто используйте . путь.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! После того, как вы сгенерировали файлы, убедитесь, что следующие команды выполняются в корне проекта ( generated/ если вы не использовали аргумент пути, как объяснено выше):
$ npm installЧтобы быстро начать, просто измените 2 вещи :
package.json .IP.js измените IP на полный IP -адрес вашего бэкэнда, будь то на localhost:PORT или где -то развернуто, как Heroku.Чтобы включить встроенную локальную аутентификацию, сгенерированный проект предполагает запущенную базу данных. Вы должны настроить свой сервер для вызовов Redux Axios:
${IP}/auth/login с помощью полезной нагрузки {электронная почта: электронная почта, пароль: пароль}.${IP}/auth/signup с помощью полезной нагрузки {электронная почта: электронная почта, пароль: пароль}.${IP}/auth/logout без полезной нагрузки. $ npm startСпасибо за игру! Хедокен. ?
Ниже вы найдете информацию о выполнении общих задач. Самая последняя версия этого руководства доступна здесь.
Вам нужно только обновить глобальную установку create-react-native-app очень редко, в идеале.
Обновление зависимости от react-native-scripts от вашего приложения должно быть таким же простым, как увеличение номера версии в package.json и переустановка зависимостей вашего проекта.
Обновление до новой версии REACT Native требует обновления версий react-native , react и expo Package, а также для установки правильной sdkVersion в app.json . См. Руководство по устранению версий для актуальной информации о совместимости версий пакета.
Если пряжа была установлена, когда проект был инициализирован, то зависимости будут установлены через пряжу, и вы, вероятно, также должны использовать ее для запуска этих команд. В отличие от установки зависимостей, синтаксис команды идентичны для пряжи и NPM на момент написания этой статьи.
npm startЗапускает ваше приложение в режиме разработки.
Откройте его в приложении Expo на своем телефоне, чтобы просмотреть его. Он будет перезагружаться, если вы сохраните редакторы в свои файлы, и вы увидите ошибки сборки и журналы в терминале.
Иногда вам может понадобиться сбросить или очистить кеш нативного Packager React. Для этого вы можете передать флаг --reset-cache к сценарию Start:
npm start --reset-cache
# or
yarn start --reset-cache
npm testЗапускает The Jest Test Runner на ваших тестах.
npm run ios Как npm start , но также пытается открыть ваше приложение в симуляторе iOS, если вы находитесь на Mac и установите его.
npm run android Например, npm start , но также пытается открыть ваше приложение на подключенном устройстве или эмуляторе Android. Требуется установка инструментов сборки Android (см. RACE Native Docs для подробной настройки). Мы также рекомендуем установить Genymotion в качестве эмулятора Android. После того, как вы закончите настройку собственной среды сборки, есть два варианта для правильной копии adb , доступной для создания приложения React Native:
adb Android StudioSettings -> ADB . Выберите «Используйте пользовательские инструменты Android SDK» и обновите с вашим каталогом Android SDK. adb/Applications/Genymotion.app/Contents/MacOS/tools/ /macos/tools/.npm run ejectЭто начнет процесс «изгнания» из сценариев создания нативного приложения React. Вам будет задано несколько вопросов о том, как вы хотите построить свой проект.
Предупреждение: Запуск Ecect - это постоянное действие (кроме любой системы управления версиями, которую вы используете). Выброшенное приложение потребует, чтобы у вас была настройка Xcode и/или Android Studio.
Вы можете редактировать app.json , чтобы включить ключи конфигурации в клавишу expo .
Чтобы изменить отображаемое имя вашего приложения, установите ключ expo.name в app.json на соответствующую строку.
Чтобы установить значок приложения, установите ключ expo.icon в app.json как локальный путь, либо URL. Рекомендуется использовать файл PNG 512x512 с прозрачностью.
Этот проект настроен на использование Jest для тестов. Вы можете настроить любую стратегию тестирования, которая вам нравится, но Jest работает из коробки. Создайте тестовые файлы в каталогах с именем __tests__ или с расширением .test , чтобы файлы были загружены Jest. См. Проект шаблона для примера теста. ДОКУМЕНТАЦИЯ ДЕЙСТВИЯ также является замечательным ресурсом, как и руководство по тестированию React.
Вы можете настроить некоторые из создания поведения нативного приложения React, используя переменные среды.
При запуске своего проекта вы увидите что -то подобное для URL своего проекта:
exp://192.168.0.2:19000
«Манифест» в этом URL -адресе сообщает приложению Expo, как извлечь и загрузить пакет JavaScript вашего приложения, поэтому даже если вы загружаете его в приложение с помощью URL, например exp://localhost:19000 , приложение Expo Client по -прежнему попытается получить ваше приложение по IP -адресу, который предоставляет сценарий Start Script.
В некоторых случаях это не идеально. Это может быть так, если вам нужно запустить свой проект внутри виртуальной машины, и вам нужно получить доступ к упаковке через другой IP -адрес, чем тот, который печатает по умолчанию. Чтобы переопределить IP -адрес или имя хоста, которое обнаруживается с помощью приложения Create React Native, вы можете указать свое собственное имя хоста через переменную среды REACT_NATIVE_PACKAGER_HOSTNAME :
Mac и Linux:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
Приведенный выше пример может привести к прослушиванию сервера разработки на exp://my-custom-ip-address-or-hostname:19000 .
Create React Native App делает много работы, чтобы сделать настройку и разработку приложений простыми и простыми, но очень трудно сделать то же самое для развертывания в Apple Store или Google Play Store, не полагаясь на размещенную услугу.
Expo предоставляет бесплатный хостинг для приложений только для JS, созданных CRNA, что позволяет вам обмениваться приложением через приложение Expo Client. Это требует регистрации для выставки.
Установите инструмент командной строки exp и запустите команду Publish:
$ npm i -g exp
$ exp publish
Вы также можете использовать такую услугу, как автономные сборки Expo, если вы хотите получить IPA/APK для распространения без необходимости создавать собственный код самостоятельно.
Если вы хотите создать и развернуть свое приложение самостоятельно, вам нужно выбросить из CRNA и использовать Xcode и Android Studio.
Обычно это так же просто, как запуск npm run eject в вашем проекте, который проведет вас через процесс. Обязательно установите react-native-cli и следуйте руководству по началу работы на собственном коде для Nate Native.
Если вы использовали API EXPO во время работы над своим проектом, то эти вызовы API перестанут работать, если вы выбросите обычный нативный проект React. Если вы хотите продолжить использование этих API, вы можете выбросить «реагировать на Native + Expokit», что все равно позволит вам создавать собственный собственный код и продолжать использовать API Expo. См. Руководство по выбросу для получения более подробной информации об этой опции.
Если вы не можете загрузить свое приложение на свой телефон из -за сетевого тайм -аута или отказанного соединения, хороший первый шаг - убедиться, что ваш телефон и компьютер находятся в одной сети и что они могут достичь друг друга. Создайте React Native App, необходимое для доступа к портам 19000 и 19001, поэтому убедитесь, что настройки вашей сети и брандмауэра разрешают доступ с вашего устройства к вашему компьютеру на обоих этих портах.
Попробуйте открыть веб -браузер на своем телефоне и открыть URL -адрес, который печатает скрипт Packager, заменив exp:// на http:// . Так, например, если под кодом QR в вашем терминале вы видите:
exp://192.168.0.1:19000
Попробуйте открыть сафари или хром на телефон и загрузить
http://192.168.0.1:19000
и
http://192.168.0.1:19001
Если это работает, но вы все еще не можете загрузить свое приложение, сканируя QR -код, пожалуйста, откройте проблему в репозитории Create React Native App с подробной информацией об этих шагах и любых других сообщениях об ошибках, которые вы, возможно, получили.
Если вы не можете загрузить http URL -адрес в веб -браузере вашего телефона, попробуйте использовать функцию привязки/мобильной точки доступа на вашем телефоне (хотя и остерегайте использование данных), подключите ваш компьютер к этой сети 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 из другого терминала. Вы также можете вручную ввести URL -адрес, напечатанный сценарием Packager в строке поиска приложения Expo, чтобы загрузить его вручную.
