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

В рамках бизнес-приложений (B2B) необходимо разрабатывать их таким образом, чтобы из единого исходного кода можно было создавать приложения с разными вкусами.

Отказ от ответственности

Я не эксперт в React Native, gulp или javascript. Решения проблем не окончательны и могут быть значительно улучшены. Если вы обнаружите какую-либо проблему или что-то необоснованное, вы можете оставить комментарий. Именно на это я и надеюсь.

Схема структуры кода - это нечто вроде
core: -, содержащее все компоненты по умолчанию, экран, изображения, навигацию, константу, помощники и т. Д.
app: - , содержащий только файл, относящийся к конкретному варианту приложения, например константу, стили и т. д.

rnproject 
  |-src
    |-core 
      |-components
      |-file 
      |-folder 
        |-file1 
        |-file2
    |-app1
      |-file 
      |-folder 
        |-file1 
    |-app2 
      |-file 
    |-app3

Я не нашел решения по двум основным причинам.
1. Настроить приложение для использования файлов, специфичных для приложения?
2. Во время сборки пакета для конкретного приложения не допустить объединения других файлов приложения?

Использование Config

Я наткнулся на этот ответ на StackOverflow.

const Home = require(‘./’ + Config.customerName + ‘/Home.js’)

Конечно, использование этого вместе с библиотекой react-native-config выглядело многообещающим.
Но я забыл сказать вам одну вещь, я новичок в разработке javascript. Только после того, как я создал тестовый проект и написал эту строку, я столкнулся с ошибкой require () должен иметь единственный строковый буквальный аргумент React Native. Так что от этого метода отказались

На основе состояния

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

if(config.flavor === 'app1') {
   //do something
}

Я не знал, как продолжить работу с этой структурой.
Вдохновленный соблазном создания такой структуры в React Native, я обратился к веб-разработке. Это, в свою очередь, познакомило меня с Gulp, набором инструментов для автоматизации болезненных или трудоемких задач в рабочем процессе разработки.

Это обеспечило решение двух моих проблем.
1. Настроить мое приложение на использование файлов, специфичных для приложения?
Файлы основных папок можно было бы заменить на файлы, специфичные для конкретного типа, перед сборкой с помощью функции переопределения gulp по умолчанию.
2. Во время сборки пакета для конкретного приложения предотвращение объединения других файлов приложения в пакет?
Это было достигнуто путем перемещения всей исходной папки за пределы стандартного проекта React Native.

project
  |-rnproject 
    |-ios 
    |-android
    |-node_modules
|-rootSrc
    |-core 
      |-components
      |-file 
      |-folder 
        |-file1 
        |-file2
    |-app1
      |-file 
      |-folder 
        |-file1 
    |-app2 
      |-file 
    |-app3

Теперь, используя gulp, я мог легко объединить core + app папки для создания src папки внутри собственного проекта реакции.

var appFlavor = "app1";
var pathOverWrite = [ 
  "./rootSrc/core/**",
  "./rootSrc/" + appFlavor + "/**"];
gulp.task('overwrite', () => {
  gulp.src(pathOverWrite)
    .pipe(gulp.dest('./rnproject/src'));
});

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

Есть еще большая проблема. Во время разработки мы не хотим вносить изменения в src папку rnproject, потому что измененные файлы нужно будет скопировать в папку приложения внутри rootSrc папки. Если мы внесем изменения в саму папку приложения, горячая перезагрузка не сработает, пока мы не запустим gulp overwrite еще раз.

Наблюдатель

Вот где в игру вступает наблюдатель. Наблюдатель мог смотреть файлы в определенной app папке. Если какое-либо из файлов изменится, мы могли бы перезаписать файл в src папке, используя задачу-наблюдатель, конвейерную с задачей перезаписи.

var appFlavor = "app1";
var pathWatch = "rootSrc/" + appFlavor + "/**";
gulp.task('watcher', () => {
  gulp.watch(pathWatch,['overwrite']);
});

Будущие улучшения

Этот сценарий можно улучшить, чтобы перезаписать только измененный файл вместо перезаписи всех файлов, используя gulp-watch (над этим еще не работали).
Еще не реализовали eslint в новой папке rootSrc.

Меня все еще мучает простой вопрос: «На правильном ли я пути?»
Может быть лучшее решение этой проблемы, которое, вероятно, все еще ускользает от меня. Я хотел бы услышать ваши решения этой проблемы.

Практическую реализацию предложенного метода можно найти в этом репозитории GitHub.

Дальнейшее чтение

  1. Создание компонентов React для нескольких брендов и приложений - это был главный источник вдохновения для создания этого проекта.
  2. Создание нескольких версий приложения React Native - это помогает в создании сборки для конкретного вкуса с разными значками приложений, названиями приложений и т. Д.

Если вам понравилась эта статья, порекомендуйте ее на Medium (аплодисменты!) И поделитесь ею в Twitter, LinkedIn и т. Д.

Не стесняйтесь связываться со мной в Twitter и / или LinkedIn. Вы также можете связаться напрямую через электронную почту.