Использование и сравнение нескольких инструментов скаффолдинга в RN (react-native-cli, create-react-native-app, exp)

Этот документ будет постоянно обновляться, исправления приветствуются

1. реагировать родной кли

Невозможно использовать сервис exp

react-native init program-name  #初始化项目
npm start（react-native start） #在项目目录下启动 js service
react-native run-android #已连接真机或开启模拟器前提下，启动项目
react-native run-ios #已连接真机或开启模拟器前提下(仅支持mac系统)，启动项目

2. создать-реагировать-нативное-приложение

create-react-native-appЭто проект с открытым исходным кодом, созданный сообществом React, который может создавать> приложение RN без настройки сборки, инструмент для создания реагирующих нативных приложений (лучше всего использовать, нет необходимости опрокидывать стену

После инициализации проект может использовать сервис exp

Установите и используйте

npm install -g create-react-native-app #全局安装

Создайте приложение с помощью Create-React-Native-APP

create-react-native-app program-name #初始化项目
cd program-name #进入项目目录
npm start #启动项目服务

общие команды create-реагировать на родное приложение

npm start  #启动本地开发服务器，这样一来你就可以通过Expo扫码将APP运行起来了
npm run ios   #将APP运行在iOS设备上，仅仅Mac系统支持，且需要安装Xcode
npm run android  #将APP运行在Android设备上，需要Android构建工具
npm test # 运行测试用例

Если установить локальноyarnинструменты управления, вам будет предложено использоватьyarnкоманда для запуска службы управления

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

использоватьExpoПриложение сканирует код, чтобы запустить QR-код, автоматически сгенерированный на экране службы проекта, и имя программы может быть отправлено войтиExpoв приложении

Конфигурация загрузки Expo относится к следующему

3. Экспо

Expo — это набор инструментов, библиотек и сервисов для создания нативных приложений для iOS и Android с помощью написания JavaScript.Его нужно использовать через стену, а скорость загрузки ресурсов низкая.

Установите и используйте

Установить сервис expo через командную строку на ПК

1、npm install exp --global #全局安装 简写： npm i -g exp

Установите приложение Expo Client на свой телефон (называемое Expo Client в магазине приложений) Адрес загрузки инсталляционного пакета:официальный сайт выставкиПосле того, как телефон будет установлен, зарегистрируйте учетную запись expo (Требуется для последующего использования на ПКexpoСервис применяет проект к выставочному приложению напрямую через аккаунт)

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

Создайте свой первый проект

2、exp init my-new-project  #初始化项目,会要求你选择模板

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

Шаблон проекта Tab Navigation включает несколько примеров экранов.

Ошибка:

Установите EXPO_DEBUG=true в вашей среде, чтобы просмотреть трассировку стека.Ошибка показана ниже. Решение: загрузите Expo XDE (используется клиентом для ПК) — проект инициализации должен быть выше стены.

Примечание. Использование командной строки для инициализации проекта может привести к зависанию при загрузке реактивных ресурсов, вы можете преобразовать его в проект инициализации XDE, затем использовать командную строку для запуска проекта и нажать

3、cd my-new-project #进入项目目录

4、exp start #启动项目，推送至手机端

После запуска проекта вам будет предложено ввести учетную запись Expo и пароль, которые вы зарегистрировали в приложении.

Структура проекта после инициализации

Структура каталогов Android под основными окнами

|- program-name             | 项目工作空间
|- android              | android 端代码  
    |- app                  | app 模块
        |- build.gradle         | app 模块 Gradle 配置文件
        |- progurad-rules.pro   | 混淆配置文件
        |- src/main             | 源代码
            |- AndroidManifest.xml  | APK 配置信息 
            |- java                 | 源代码
                |- 包名                 | java 源代码
                    |- MainActivity.java    | 界面文件, (加载ReactNative源文件入口)
                    |- MainApplication.java | 应用级上下文, (ReactNative 插件配置)
            |- res                  | APK 资源文件
    |- gradle               | Gradle 版本配置信息
    |- keystores            | APK 打包签名文件(如果正式开发需要自己定义修改签名文件)
    |- gradlew              | Gradle运行脚本, 与 react-native run-android 有关
    |- gradlew.bat          | Gradle运行脚本, 与 react-native run-android 有关
    |- gradle.properties    | Gradle 的配置文件, 正常是 AndroidHome, NDK, JDK, 环境变量的配置
    |- build.gradle         | Gradle的全局配置文件, 主要是是配置编译 Android 的 Gradle 插件,及配置 Gradle仓库
    |- settings.gradle      | Gradle模块配置
|- ios                  | iOS 端代码
|- node_modules         | 项目依赖库
|- package.json         | node配置文件, 主是要配置项目的依赖库,
|- index.android.js     | Android 项目启动入口
|- index.ios.js         | iOS 项目启动入口

Описание файла package.json

dependencies

зависимости проекта
- Конфигурация зависимостей, метод конфигурации информации о конфигурации
  - "версия" применяет конкретную версию
  - "^версия" совместимая версия
  - "git..." Получить репозиторий зависимостей с адреса управления версиями git
  - «путь/путь/путь» указывает зависимую библиотеку в локальном расположении
  - «последний» использует последнюю версию
  - ">version" найдет последнюю версию в репозитории npm, и она больше этой версии.
  - ">=version" найдет самую последнюю версию в репозитории npm и больше или равную этой версии"

devDependencies

Зависимости для версии разработки

version

флаг версии js

description

Описание проекта, в основном используемое для описания библиотеки, когда она используется в качестве сторонней библиотеки поддержки.

main

Запись проекта по умолчанию

engines

Настройте информацию о версии движка, такую как узел, зависимости версии npm.

**index.*.js Новая версия единой записи RN: index.js

Обычно он используется только как запись проекта, и никакая другая обработка бизнес-кода не выполняется.

Примечание:1. Виртуальная машина потребляет много памяти компьютера, для тестирования установки рекомендуется использовать реальную машину.